router Fix hydration mismatch in production builds when using the Tailwind 4 Integration Guide

Fix hydration mismatch in production builds when using the Tailwind 4 Integration Guide

Added source("../") to the Tailwind import to explicitly set the base path for class detection.

Problem

Dev server runs from project root, production build runs from a different working directory
This causes Tailwind to scan different file sets, generating different CSS content
Different CSS content = different content hash = hydration mismatch

Solution

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

The source() directive tells Tailwind to always scan from ../ relative to the CSS file location, regardless of the current working directory during build.

What it points to

In the Tailwind integration guide the path is relative to the CSS file location (app/styles/app.css → app/src/)

References

Without this explicit path, builds from different working directories (CI/CD, Docker, monorepo tools) will produce inconsistent CSS output.

Mentioned in https://discord.com/channels/719702312431386674/1390062434038845521

Jul 09 '25 18:07 luksch42

can you please add some more description about that. what should this point to, a link to the tailwind docs etc.

Jul 09 '25 20:07 schiller-manuel

View your CI Pipeline Execution ↗ for commit 941ac88e7240f3ea2815654190ebc902123ae445

Command	Status	Duration	Result
`nx affected --targets=test:eslint,test:unit,tes...`	✅ Succeeded	<1s	View ↗
`nx run-many --target=build --exclude=examples/*...`	✅ Succeeded	2s	View ↗

☁️ Nx Cloud last updated this comment at 2025-07-17 22:29:40 UTC

Jul 17 '25 22:07 nx-cloud[bot]

More templates

@tanstack/arktype-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/arktype-adapter@4606

@tanstack/directive-functions-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/directive-functions-plugin@4606

@tanstack/eslint-plugin-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/eslint-plugin-router@4606

@tanstack/history

npm i https://pkg.pr.new/TanStack/router/@tanstack/history@4606

@tanstack/react-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router@4606

@tanstack/react-router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router-devtools@4606

@tanstack/react-router-with-query

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router-with-query@4606

@tanstack/react-start

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start@4606

@tanstack/react-start-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-client@4606

@tanstack/react-start-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-plugin@4606

@tanstack/react-start-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-server@4606

@tanstack/router-cli

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-cli@4606

@tanstack/router-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-core@4606

@tanstack/router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-devtools@4606

@tanstack/router-devtools-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-devtools-core@4606

@tanstack/router-generator

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-generator@4606

@tanstack/router-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-plugin@4606

@tanstack/router-utils

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-utils@4606

@tanstack/router-vite-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-vite-plugin@4606

@tanstack/server-functions-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/server-functions-plugin@4606

@tanstack/solid-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router@4606

@tanstack/solid-router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router-devtools@4606

@tanstack/solid-start

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start@4606

@tanstack/solid-start-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-client@4606

@tanstack/solid-start-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-plugin@4606

@tanstack/solid-start-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-server@4606

@tanstack/start-client-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-client-core@4606

@tanstack/start-plugin-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-plugin-core@4606

@tanstack/start-server-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-server-core@4606

@tanstack/start-server-functions-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-server-functions-client@4606

@tanstack/start-server-functions-fetcher

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-server-functions-fetcher@4606

@tanstack/start-server-functions-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-server-functions-server@4606

@tanstack/valibot-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/valibot-adapter@4606

@tanstack/virtual-file-routes

npm i https://pkg.pr.new/TanStack/router/@tanstack/virtual-file-routes@4606

@tanstack/zod-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/zod-adapter@4606

commit: 941ac88

Jul 17 '25 22:07 pkg-pr-new[bot]

This is also able to be reproduced inside docker builds. Thanks for the tip. More context on the discord thread: https://discord.com/channels/719702312431386674/1431725277758619770

Probably a upstream issue with @tailwindcss or vite plugin

Nov 04 '25 20:11 nikuscs

@luksch42 we use tailwind 4 with postcss in the examples and e2e projects of this repo. We stayed clear of the new vite plugin as it didn't seem quite ready yet. The problem described here, is it both hit when using tailwindcss 4 with the vite-plugin and postcss, or it it only one of those that's problematic?

Nov 19 '25 20:11 birkskyum