Upgrade frontend to Tailwind v4.3 and lint deprecated classes

[kirangadhave]

📝 Summary

Upgrades the frontend to Tailwind v4.3 and adds lint coverage so deprecated utility classes cannot creep back in.

Bumps tailwindcss and @tailwindcss/postcss to 4.3 and runs the official @tailwindcss/upgrade codemod, which modernizes utilities across the frontend: the CSS-variable shorthand (text-[var(--x)] becomes text-(--x)), has-[] variants ([&:has(svg)]: becomes has-[svg]:), and renamed utilities. It also replaces the v3-era utilities that still compiled as aliases: flex-shrink-0 becomes shrink-0, and outline-none becomes outline-hidden, the latter restoring the forced-colors outline fallback that v4's outline-none drops.

Adds two oxlint rules to the marimo plugin so regressions are caught in CI: no-deprecated-tailwind-classes (warns and autofixes renamed utilities like flex-shrink-0 and overflow-ellipsis) and no-removed-tailwind-classes (errors on removed opacity utilities such as bg-opacity-50). Both are scoped to className/class attributes and the class helpers (cn, cva, clsx, ...) so unrelated strings are not flagged.

Verified that make fe-check passes and that the rewritten classes produce correct computed CSS in the running app: has-[svg]:pl-11 yields 44px padding with an icon and 16px without, the var-shorthand resolves to the expected colors, and shrink-0, grow, outline-hidden, and text-ellipsis all resolve.

Closes MO-5965

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
marimo-docs	Ready	Preview, Comment	Jun 26, 2026 4:44am

[cubic-dev-ai]

No issues found across 13 files

Architecture diagram

sequenceDiagram
    participant Tailwind as Tailwind v4 (PostCSS)
    participant Dev as Developer
    participant TSX as TSX Source Files
    participant Compiler as Compiler (PostCSS/CSS)
    participant Browser as Browser (Chrome/Firefox/Safari)
    participant User as User (High-Contrast Mode)

    Note over Tailwind,Browser: Tailwind v4 Utility Class Resolution & Browser Rendering

    Dev->>TSX: Write JSX with utility classes
    TSX->>Compiler: CSS classes in className attributes

    alt Class: flex-shrink-0 (deprecated)
        Compiler->>Tailwind: Resolve flex-shrink-0
        Tailwind-->>Compiler: Emit flex-shrink CSS rule
        Compiler-->>Browser: Compiled CSS bundle
        Browser->>Browser: Apply flexbox shrink behavior
    end

    alt Class: shrink-0 (current)
        Compiler->>Tailwind: Resolve shrink-0
        Tailwind-->>Compiler: Emit flex-shrink CSS rule (identical output)
        Compiler-->>Browser: Compiled CSS bundle
        Browser->>Browser: Apply flexbox shrink behavior
    end

    alt Class: outline-none (deprecated in v4)
        Compiler->>Tailwind: Resolve outline-none
        Tailwind-->>Compiler: Emit outline-style: none (NO forced-colors fallback)
        Compiler-->>Browser: Compiled CSS bundle
        User->>Browser: Enable forced-colors (high-contrast mode)
        Browser->>Browser: No focus outline visible (accessibility regression)
    end

    alt Class: outline-hidden (current)
        Compiler->>Tailwind: Resolve outline-hidden
        Tailwind-->>Compiler: Emit outline: transparent + outline-style: hidden (preserves forced-colors fallback)
        Compiler-->>Browser: Compiled CSS bundle
        User->>Browser: Enable forced-colors (high-contrast mode)
        Browser->>Browser: Focus outline visible via forced-colors override
    end

    Note over Compiler: Build verification via diff of compiled bundle (no unexpected changes)

Loading

_{Re-trigger cubic}

[Copilot]

Pull request overview

Upgrades the frontend Tailwind toolchain to v4.3 and modernizes Tailwind utility usage across the UI, while adding oxlint coverage to prevent deprecated/removed v3-era utilities from reappearing.

Changes:

• Bump tailwindcss + @tailwindcss/postcss to ^4.3.0 (lockfile updates included).
• Run Tailwind upgrade codemod across frontend components (utility renames, CSS var shorthand updates, has-* variants, etc.).
• Add two custom oxlint rules (no-deprecated-tailwind-classes, no-removed-tailwind-classes) and enable them in .oxlintrc.json.

Reviewed changes

Copilot reviewed 37 out of 38 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
pnpm-lock.yaml	Locks Tailwind + related dependency upgrades for v4.3.
frontend/package.json	Bumps Tailwind dependencies to ^4.3.0.
frontend/src/utils/html-to-image.ts	Updates style property allowlist (but currently introduces invalid CSS property names).
frontend/src/plugins/impl/TabsPlugin.tsx	Updates min-width utility to v4-friendly form.
frontend/src/plugins/impl/MatrixPlugin.tsx	Updates renamed utilities and CSS var color utilities.
frontend/src/plugins/impl/matplotlib/matplotlib-renderer.ts	Updates outline utility rename.
frontend/src/core/codemirror/language/languages/sql/renderers.tsx	Migrates CSS-var bracket syntax to v4 shorthand.
frontend/src/components/ui/table.tsx	Migrates :has()-based selector utilities to has-* variant.
frontend/src/components/ui/reorderable-list.tsx	Updates data-variant + outline utility rename.
frontend/src/components/ui/command.tsx	Updates descendant/attribute selector styling utilities to v4 syntax.
frontend/src/components/ui/alert.tsx	Migrates :has() selector to has-* variant.
frontend/src/components/slides/reveal-component.tsx	Updates outline utilities to v4 rename.
frontend/src/components/slides/minimap.tsx	Updates outline utilities to v4 rename.
frontend/src/components/editor/RecoveryButton.tsx	Updates wrapping utility name.
frontend/src/components/editor/output/TextOutput.tsx	Updates wrapping utility name.
frontend/src/components/editor/output/MarimoErrorOutput.tsx	Migrates :has() selector to has-* variant.
frontend/src/components/editor/columns/sortable-column.tsx	Migrates CSS-var bracket syntax to v4 shorthand.
frontend/src/components/editor/columns/cell-column.tsx	Updates arbitrary positioning syntax.
frontend/src/components/editor/chrome/wrapper/pending-ai-cells.tsx	Updates min-width utility to v4-friendly form.
frontend/src/components/editor/chrome/panels/outline/floating-outline.tsx	Updates arbitrary positioning syntax.
frontend/src/components/editor/chrome/panels/empty-state.tsx	Updates renamed flex utility.
frontend/src/components/editor/cell/CreateCellButton.tsx	Updates outline utility rename.
frontend/src/components/editor/ai/ai-completion-editor.tsx	Updates width utility (currently to a likely-nonexistent class).
frontend/src/components/editor/actions/pair-with-agent-modal.tsx	Updates wrapping utility name.
frontend/src/components/dependency-graph/minimap-content.tsx	Updates z-index utility to scale-based form.
frontend/src/components/data-table/filter-pill-editor.tsx	Updates min-width utility to v4-friendly form.
frontend/src/components/data-table/columns.tsx	Updates wrapping utility name.
frontend/src/components/chat/chat-history-popover.tsx	Updates renamed flex utility.
frontend/src/components/chat/acp/session-tabs.tsx	Updates renamed flex utility.
frontend/src/components/chat/acp/scroll-to-bottom-button.tsx	Updates outline utility rename.
frontend/src/components/chat/acp/common.tsx	Migrates CSS-var bracket syntax to v4 shorthand.
frontend/src/components/chat/acp/blocks.tsx	Migrates CSS-var bracket syntax + wrapping utility name + renamed flex utility.
frontend/src/components/chat/acp/agent-panel.tsx	Updates renamed flex utility.
frontend/src/components/app-config/mcp-config.tsx	Migrates CSS-var bracket syntax to v4 shorthand.
frontend/src/components/app-config/ai-config.tsx	Updates outline utility rename.
frontend/src/components/ai/display-helpers.tsx	Migrates CSS-var bracket syntax to v4 shorthand.
frontend/lint/marimo-plugin.js	Adds Tailwind v4 deprecated/removed utility lint rules (with autofix for renames).
frontend/.oxlintrc.json	Enables new Tailwind utility lint rules in CI.

Files not reviewed (1)

• pnpm-lock.yaml: Generated file