-
-
Notifications
You must be signed in to change notification settings - Fork 4.8k
tailwind v4.0.0-beta.7 react hydration error with react-router v7 #15422
-
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.
Beta Was this translation helpful? Give feedback.
All reactions
Replies: 4 comments 5 replies
-
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:
Beta Was this translation helpful? Give feedback.
All reactions
-
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?
Beta Was this translation helpful? Give feedback.
All reactions
-
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!
Beta Was this translation helpful? Give feedback.
All reactions
-
I can confirm it still exists in the Tailwind v4 release and it happens only on production.
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 1
-
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
Beta Was this translation helpful? Give feedback.
All reactions
-
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.
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 1
-
Upgrading tailwindcss and @tailwindcss/vite to v4.1.10 solved the issue for me 🎉
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 1
-
Tested it with tailwindcss, @tailwindcss/vite in v4.1.1 today, still running into a hydration error when using the CSS url file import and trying to add it with a LinksFunction to the <head /> for the production build (react-router in v7.7.0):
// root.tsx file import stylesheet from "~/styles.css?url"; export const links: Route.LinksFunction = () => [ { rel: "stylesheet", href: stylesheet }, ];
When using the direct CSS import, as mentioned by @1abrizk above, it is working now, yes:
// root.tsx file import "./styles.css";
Beta Was this translation helpful? Give feedback.
All reactions
-
But what if I want setup like that?
import tailwindCss from "./tailwind.css?url";
export const links: Route.LinksFunction = () => [
// double load trick to have non-blocking render css load
{
rel: "preload",
href: tailwindCss,
as: "style",
},
{
rel: "stylesheet",
href: tailwindCss,
},
];
Beta Was this translation helpful? Give feedback.