Skip to content

Custom Tailwind colors in @layer theme { :root } Not Rendering Properly on React Native Web with Expo SDK 55 #418

Description

@akayakagunduz

What happened?

I am experiencing an issue with Uniwind when using custom Tailwind colors defined inside @layer theme { :root } on a clean Expo SDK 55 project.

Standard Tailwind colors like bg-red-500 work correctly on iOS, Android, and React Native Web.
Custom colors defined directly in @theme { ... } in global.css work fine. For example:

@theme { /* --color-primary: var(--color-blue-500); */ }

However, when defining custom colors inside @layer theme { :root } as recommended in the Uniwind theming docs https://docs.uniwind.dev/theming/custom-themes, the colors work on native platforms but fail on React Native Web. The style appears briefly but disappears immediately.

@layer theme { :root { @variant light { --color-primary: var(--color-blue-500); } @variant dark { --color-primary: var(--color-blue-500); } } }

Preview / Web

Screen.Recording.2026-02-28.at.00.56.06.mov

Preview / iOS

Image Image

Steps to Reproduce

  1. Clone the minimal reproduction repository: https://github.com/akayakagunduz/expo_sdk_55_with_uniwind_bug
  2. Install dependencies with yarn or npm install.
  3. Run the project on web with expo start --web.
  4. Observe that bg-red-500 renders correctly, custom colors inside @theme { ... } render correctly, but colors inside @layer theme { :root } do not render consistently.

Expected Behavior:

Custom colors defined in @layer theme { :root } should render correctly on React Native Web just like standard Tailwind colors and colors defined in @theme { ... }.

Snack or Repository Link

https://github.com/akayakagunduz/expo_sdk_55_with_uniwind_bug

Uniwind version

1.4.0

React Native Version

0.83.2

Platforms

Web

Expo

Yes

Additional information

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions