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

sialex-net · 2024-12-17T11:03:15Z

sialex-net
Dec 17, 2024

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 · 2024-12-17T15:56:47Z

philipp-spiess
Dec 17, 2024
Maintainer

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:

3 replies

sialex-net Dec 18, 2024
Author

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 Jan 7, 2025

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 Jan 24, 2025

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

ghost · 2025-01-25T16:51:53Z

ghost
Jan 25, 2025

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

1 reply

azzzy Jan 27, 2025

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.

pawelgalazka · 2025-06-22T07:20:04Z

pawelgalazka
Jun 22, 2025

Upgrading tailwindcss and @tailwindcss/vite to v4.1.10 solved the issue for me 🎉

1 reply

manuelpuchta Jul 21, 2025

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";

ziimakc · 2025-10-15T11:09:55Z

ziimakc
Oct 15, 2025

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,
	},
];

0 replies

mr-scrpt · 2025-11-02T13:57:22Z

mr-scrpt
Nov 2, 2025

I have a similar problem. If I use the standard component from react-router v7 and import tailwind.css however I want, whether it's the links() function or directly import “@/shared/styles/tailwind.css”;, I get an error. If I remove the <Links/> component, the error disappears.
Here is one example

import { RootProvider } from "../provider/root.provider";
import "../setup";


import { Outlet } from "react-router";

export const links = () => [
  { rel: "icon", type: "image/svg+xml", href: "/favicon.svg" },
];

export default function Root() {
  return (
    <RootProvider>
      <Outlet />
    </RootProvider>
  );
}

import type { ComponentProps } from "react";
import { Meta, Links, ScrollRestoration, Scripts } from "react-router";

type HtmlLayoutProps = ComponentProps<"html"> & { locale: string };

import "@/shared/styles/tailwind.css";

export const HtmlLayout = (props: HtmlLayoutProps) => {
  const { children, locale = "en" } = props;
  return (
    <html lang={locale}>
      <head suppressHydrationWarning>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body
        className="bg-ctp-base text-ctp-text flex items-center justify-center"
        style={{ minHeight: "100dvh" }}
      >
        <main
          className="w-full max-w-[600px] min-h-[400px] max-h-[800px] px-4"
          style={{ height: "100dvh", maxHeight: "800px" }}
        >
          {children}
        </main>
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
};

Here's the error


html.layout.tsx:16 A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:

- A server/client branch `if (typeof window !== 'undefined')`.
- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
- Date formatting in a user's locale which doesn't match the server.
- External changing data without sending a snapshot of it along with the HTML.
- Invalid HTML tag nesting.

It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.

https://react.dev/link/hydration-mismatch

  ...
    <Router basename="/" location={{pathname:"/", ...}} navigationType="POP" navigator={{...}}>
      <DataRoutes routes={[...]} future={{...}} state={{...}} unstable_onError={function handleGlobalError}>
        <RenderErrorBoundary location={{pathname:"/", ...}} revalidation="idle" component={<HtmlLayout>} ...>
          <RenderedRoute match={{params:{}, ...}} routeContext={{...}}>
            <HtmlLayout>
              <html lang="en">
                <head suppressHydrationWarning={true}>
                  <meta>
                  <meta>
                  <Meta>
                  <Links>
                    <style
+                     data-react-router-critical-css=""
-                     data-react-router-critical-css={null}
                      dangerouslySetInnerHTML={{
+                       __html: "\n/* /src/shared/styles/tailwind.css */\n/*! tailwindcss v4.1.14 | MIT License | http..."
-                       __html: "body {transition: opacity ease-in 0.2s; } \nbody[unresolved] {opacity: 0; display: bl..."
                      }}
                    >
                    ...

0 replies

Uh oh!

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

Uh oh!

Replies: 5 comments · 5 replies

Uh oh!

philipp-spiess Dec 17, 2024 Maintainer

Uh oh!

sialex-net Dec 18, 2024 Author

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Replies: 5 comments 5 replies

philipp-spiess
Dec 17, 2024
Maintainer

sialex-net Dec 18, 2024
Author