Skip to content

[Native] Tailwind CSS 4.3.3 emits :scope theme selectors that Uniwind 1.12.0 drops #669

Description

@DigitalAndSEO

What happened?

After upgrading from Uniwind 1.10.1 + Tailwind CSS 4.3.2 to Uniwind 1.12.0 + Tailwind CSS 4.3.3, custom variables declared in rootless @variant blocks are silently dropped on native.

Given:

@layer theme {
  @variant light {
    --repro: #2563eb;
  }

  @variant dark {
    --repro: #60a5fa;
  }
}

@theme inline static {
  --color-repro: var(--repro);
}

Tailwind CSS 4.3.3 emits a selector shaped like:

:scope:where(.light, .light *)

Uniwind 1.12.0 does not retain this variable in its native scoped theme variables. At runtime:

  • useCSSVariable("--repro") returns "unset".
  • useCSSVariable("--color-repro") returns "unset".
  • bg-repro does not render a background color.

An otherwise identical variable wrapped in :root works correctly and resolves to a concrete color. The reproduction displays both cases side by side.

This is silent: TypeScript, Expo Doctor and the native build all succeed.

We originally observed it through a downstream UI-library consumer of useCSSVariable, where the literal "unset" eventually caused a color transformation to throw. The linked reproduction does not include that UI library and reproduces the underlying issue using only Expo, React Native, Uniwind and Tailwind CSS.

This appears related to the Tailwind CSS 4.3.3 selector changes discussed in #661 and addressed generally by #662. Issue #623 also describes silently dropped theme utilities, although its import-order cause is different.

If rootless @variant blocks are intentionally unsupported, a compile-time error or warning would be preferable to silently registering the variable as "unset".

Steps to Reproduce

  1. Clone the reproduction repository.
  2. Run pnpm install.
  3. Run pnpm ios.
  4. Observe that the Rootless blue circle is missing.
  5. Observe that --repro and --color-repro display "unset".
  6. Observe that the green With :root control renders correctly and --rooted-control resolves to #4ade80.
  7. Wrap the rootless variants in :root, or downgrade to Uniwind 1.10.1 + Tailwind CSS 4.3.2, and observe that the missing color is restored.

Snack or Repository Link

https://github.com/DigitalAndSEO/uniwind-tailwind-433-scope-repro

Uniwind version

1.12.0

React Native Version

0.86.3

Platforms

iOS

Expo

Yes

Additional information 〰

Activity

  1. added
    bugSomething isn't working
    invalidThis doesn't seem right
    and removed
    bugSomething isn't working
    on Sep 7, 2026
  2. Brentlok commented on Sep 7, 2026

    @Brentlok
    Contributor

    Every example in the docs uses
    @layer theme -> :root -> @variant dark
    not
    @layer theme -> @variant dark
    Please use suggested syntax. Tailwind doesn't really mark those compile changes as breaking, so we want to minimize supported syntaxes. We're planning custom syntax for uniwind v2 to ensure we have control over this, but for not please stick with recommended setup

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions