Skip to content

Build/preview regression: RNW Tailwind classes ignored since 1.2.7 #367

Description

@dannyhw

Summary

Tailwind v4 utilities apply to regular DOM elements, but do not apply to React Native Web components after vite build + vite preview with uniwind >= 1.2.7.

Repro

Repo: https://github.com/dannyhw/uniwind-rnw-build-repro

Steps:

  1. npm i
  2. npm run build
  3. npm run preview

Observed:

  • <p> is italic (Tailwind OK)
  • RNW Text / View classes are present but styles are not applied

Expected:

  • font-bold text-red-500 → red + bold
  • bg-blue-500 p-4 mt-4 → blue background + padding + margin
  • text-white font-bold → white + bold

You can also see the same in the vite example app in this repo, when you run the build the text is not styled at all

Analysis

  • In 1.2.6, dist/module/components/web/rnw.js moved RNW CSS rules into @layer rnw at runtime.
  • In 1.2.7, that runtime move was removed.
  • 1.2.7 adds an optimizeDeps esbuild patch (PR fix: patch rnw to wrap default styles with css layer #337) for createOrderedCSSStyleSheet, but it only runs in dev.
  • Build/preview still uses the unlayered RNW stylesheet, so it overrides Tailwind v4 layered utilities.

Proposed fix (one option)

Apply the same resolve patch in build (Rollup/Vite), not just optimizeDeps. For example something like this:

const rnwLayeredStyleSheet = {
  enforce: "pre",
  name: "rnw-layered-stylesheet",
  resolveId(source, importer) {
    const isTarget =
      source === "./createOrderedCSSStyleSheet" ||
      source.endsWith(
        "react-native-web/dist/exports/StyleSheet/dom/createOrderedCSSStyleSheet.js"
      );
    if (isTarget && importer?.includes("react-native-web/dist/exports/StyleSheet")) {
      return require.resolve(
        "uniwind/dist/module/components/web/createOrderedCSSStyleSheet.js"
      );
    }
  },
};

(I left this fix the repro’s vite.config.js.)

Thanks!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    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