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

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