tailwind v4.0.0-beta.7 react hydration error with react-router v7

[sialex-net]

What version of Tailwind CSS are you using?

v4.0.0-beta.7

What build tool (or framework if it abstracts the build tool) are you using?

react-router v7
vite v5.4.1

What version of Node.js are you using?

v22.11.0

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

https://github.com/sialex-net/rr7-tailwindcss4-beta

Describe your issue

Upgrading tailwindcss to v4-beta causes Minified React error #418 when serving build via wrangler
https://react.dev/errors/418?args[]=

Hydration error does not occur when serving on vite dev server.

Same error occurs with node runtime version of react-router.

Side effect import resolves error.

[philipp-spiess]

Hey! Tailwind CSS does not modify your HTML/DOM structure and a hydration error typically means that the HTML from your client-side rendered output does not match the server-side rendered one, so it's likely this error is unrelated to Tailwind CSS.

I looked in your reproduction repository nevertheless and found it works fine when started via the dev command:

[sialex-net]

Thanks for your help!

Good to know the error has nothing to do with tailwindcss!

Any idea if it's more likely to be with vite or framework-specific?

[Sulkar]

Hello,
In my view, it indeed has something to do with Tailwind beta and its integration, as when running npm run build, two separate CSS files are generated, which leads to the hydration issue. When you run the site in production, you will see the error.
Thank you!

[azzzy]

I can confirm it still exists in the Tailwind v4 release and it happens only on production.

[1abrizk]

I tried this change:

from import stylesheet from "./app.css?url" To this: import "./app.css"

It worked, and I believe this might solve the issue.

See this remix-run/react-router-templates#75

[azzzy]

Thanks, I figured it out also, I see that we opened basically the same PR in the RR repo 🙂

It seems @tailwindcss-vite generates slightly different css files for the server and client entry of RR 7:

vite v5.4.11 building for production...
✓ 48 modules transformed.
build/client/.vite/manifest.json                  2.08 kB │ gzip:  0.53 kB
build/client/assets/logo-dark-pX2395Y0.svg        6.10 kB │ gzip:  2.40 kB
build/client/assets/logo-light-CVbx2LBR.svg       6.13 kB │ gzip:  2.41 kB
build/client/assets/app-xqat8gf9.css             22.70 kB │ gzip:  6.32 kB  <----
build/client/assets/with-props-DYsm_2E1.js        0.35 kB │ gzip:  0.21 kB
build/client/assets/root-CR7BLDvn.js              1.22 kB │ gzip:  0.68 kB
build/client/assets/home-Cx76ZJ3y.js              3.74 kB │ gzip:  1.72 kB
build/client/assets/chunk-K6AXKMTT-C90Ya4xn.js  105.36 kB │ gzip: 35.65 kB
build/client/assets/entry.client-Dhb33yhI.js    178.81 kB │ gzip: 56.76 kB
✓ built in 557ms
vite v5.4.11 building SSR bundle for production...
✓ 11 modules transformed.
build/server/.vite/manifest.json              0.74 kB
build/server/assets/logo-dark-pX2395Y0.svg    6.10 kB
build/server/assets/logo-light-CVbx2LBR.svg   6.13 kB
build/server/assets/app-C-j-FxCF.css         20.47 kB  <----
build/server/index.js                        10.92 kB

✓ 1 asset moved from React Router server build to client assets.
build/client/assets/app-C-j-FxCF.css

In development mode Vite uses plain file names but for the production build it uses a content-based hashing strategy, so the url of the stylesheet is different for client and server in the prod build.

Vite supports side effect imports out of the box, so this looks like a better default for CSS assets.