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...

Uncaught Error: Hydration failed because the server rendered HTML didn't match the client...

am i missing something here or it just false warning?

TanStack•13mo ago•

4 replies

then-purple

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...

Uncaught Error: Hydration failed because the server rendered HTML didn't match the client...

am i missing something here or it just false warning?

Tailwind v4 Uncaught Error: Hydration failed

Similar Threads

Tailwind v4 Uncaught Error: Hydration failed

Similar Threads

Similar Threads

Similar Threads