noble-gold

Tailwind v4 Uncaught Error: Hydration failed

I'm using tailwind v4 with the following configuration

// app.config.ts
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  vite: {
    plugins: [
      tailwindcss(),
      ...
    ],
  },
});

// routes/__root.tsx
import tailwind from "../tailwind.css?url"

export const Route = createRootRoute({
  head: () => ({
    ...
    links: [
      { rel: 'stylesheet', href: tailwind },
    ]
  }),
  component: RootComponent,
});

// app.config.ts
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  vite: {
    plugins: [
      tailwindcss(),
      ...
    ],
  },
});

// routes/__root.tsx
import tailwind from "../tailwind.css?url"

export const Route = createRootRoute({
  head: () => ({
    ...
    links: [
      { rel: 'stylesheet', href: tailwind },
    ]
  }),
  component: RootComponent,
});

it works but the console complaining about Uncaught Error: Hydration failed because the server rendered HTML didn't match the client... am i missing something here or it just false warning?

4 Replies

noble-goldOP•7mo ago

I think this has something to do with vite because no error occurs in the console when using postcss

rare-sapphire•7mo ago

you need to explicitly set source in css for vite plugin to work

@import "tailwindcss" source("../");

@import "tailwindcss" source("../");

https://tailwindcss.com/docs/detecting-classes-in-source-files#setting-your-base-path

Detecting classes in source files - Core concepts

Understanding and customizing how Tailwind scans your source files.

continuing-cyan•7mo ago

I have a similar setup but am still running into hydration errors with tailwind. i added

@import "tailwindcss" source("../");

@import "tailwindcss" source("../");

but i am still seeing the above hydration error locally. During production i am seeing styles load, but a 404 on one CSS file (i only have one though) and the minified hydartion error

noble-goldOP•7mo ago

i'm using the latest version of start, and no longer need the define source in my tailwind. Sometimes the hydration error showed up again when i'm working with the css file. Restart the dev the the errors will be gone

Gaming

Programming

Tailwind v4 Uncaught Error: Hydration failed

Did you find this page helpful?