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:
npm i
npm run build
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!
Summary
Tailwind v4 utilities apply to regular DOM elements, but do not apply to React Native Web components after
vite build+vite previewwith uniwind >= 1.2.7.Repro
Repo: https://github.com/dannyhw/uniwind-rnw-build-repro
Steps:
npm inpm run buildnpm run previewObserved:
<p>is italic (Tailwind OK)Text/Viewclasses are present but styles are not appliedExpected:
font-bold text-red-500→ red + boldbg-blue-500 p-4 mt-4→ blue background + padding + margintext-white font-bold→ white + boldYou 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
dist/module/components/web/rnw.jsmoved RNW CSS rules into@layer rnwat runtime.optimizeDepsesbuild patch (PR fix: patch rnw to wrap default styles with css layer #337) forcreateOrderedCSSStyleSheet, but it only runs in dev.Proposed fix (one option)
Apply the same resolve patch in build (Rollup/Vite), not just optimizeDeps. For example something like this:
(I left this fix the repro’s
vite.config.js.)Thanks!