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?