All the stylesheets CSS file loading twice on build #16252
Comments
|
Hey! Thanks for the repro. I looked into this from the Tailwind CSS extension side. What's happening is that React Router runs two separate builds, one for the server and one for the client. The Tailwind CSS extension progressively scans your components for class names and by the time the first build is finished (client build in this case), we haven't scanned through the server modules yet. This causes the stylesheet to become larger in the server build later which causes Vite or React Router to inline both CSS files since they're different... A repro for this that doesn't use Tailwind CSS btw is this minimal Vite plugin: {
name: "transform-css",
transform(code, id) {
if (id.includes(".css?transform-only")) {
return `/*! ${Date.now()} */\n${code}`;
}
},
},Let me ask in your original React Router issue as well, trying to understand where to fix this since I'm not sure how Vite and React Router play together in that case. |
|
This also causes the hydration error on react-router client bundle as same tailwind CSS file
Uncaught Error: Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. 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={{...}}>
<RenderErrorBoundary location={{pathname:"...", ...}} revalidation="idle" component={<Layout>} error={undefined} ...>
<RenderedRoute match={{params:{...}, ...}} routeContext={{outlet:null, ...}}>
<Layout>
<html lang="en">
<head>
<meta>
<meta>
<Meta>
<Links>
<link>
<link>
<link>
+ <link rel="stylesheet" href="/assets/app-Bwb2LP5W.css">
- <link rel="stylesheet" href="/assets/app-V-DI9mVo.css">
...
at throwOnHydrationMismatch (react-dom-client.development.js:4128:11)
at beginWork (react-dom-client.development.js:9929:17)
at runWithFiberInDEV (react-dom-client.development.js:543:16)
at performUnitOfWork (react-dom-client.development.js:15044:22)
at workLoopConcurrent (react-dom-client.development.js:15038:9)
at renderRootConcurrent (react-dom-client.development.js:15013:15)
at performWorkOnRoot (react-dom-client.development.js:14333:13)
at performWorkOnRootViaSchedulerTask (react-dom-client.development.js:15931:7)
at MessagePort.performWorkUntilDeadline (scheduler.development.js:44:48) |
|
@khanakia Hey! We decided to land some changes in the Vite plugin that will ensure that ensures that there are no inconsistencies in the class name list. I have validated it against your repro so this should be fixed now. We plan to release this in a patch very soon (hopefully today!). Thanks for the bug report. 🙇 |
|
Thanks |
What version of Tailwind CSS are you using?
v4.0.2
What build tool (or framework if it abstracts the build tool) are you using?
react-router framework 7.1.3
What version of Node.js are you using?
v22.12.0
What browser are you using?
Chrome
What operating system are you using?
macOS
Reproduction URL
pnpm buildhttp-server-spa build/client index.html 8090to preview the buildDescribe your issue
Issue is described here
remix-run/react-router#12940 (comment)
The text was updated successfully, but these errors were encountered: