[Start] CSS files in node-server build don't work with Tailwind 4.0

[glecetre]

Which project does this relate to?

Start

Describe the bug

When using TailwindCSS v4.0 beta, the node-server build has problems with stylesheets.
Here's a repro repo: https://github.com/glecetre/tanstack-start-tailwind-beta.

It works without issue in dev (pnpm dev) but doesn't on the built app (pnpm build && node .output/server/index.mjs.)

From what I can gather (I don't fully understand the build process), the CSS file generates at least two different assets: .output/public/assets/app-{hash}.css and .output/public/_build/assets/app-{hash}.css. I think it's for server-side and client-side import. The problem is that these assets don't have the same hash, but the generated HTML doesn't seem to make a difference.

Example of generated assets:

.output/
  public/
    _build/
      assets/
        app-C5S9l2go.css
    assets/
      app-DMI6-ub3.css

Here's the HTML's link tag for this resource: <link rel="stylesheet" href="/_build/assets/app-DMI6-ub3.css">.

I understand that Tailwind 4.0 being in beta, this issue may not be relevant until the release candidate in which case it could be closed without further investigation. Thanks!

Your Example Website or App

https://github.com/glecetre/tanstack-start-tailwind-beta

Steps to Reproduce the Bug or Issue

1. Clone the repo
2. pnpm i
3. pnpm dev --> all good
4. pnpm build && node .output/server/index.mjs --> not all good

Expected behavior

As a visitor I expect to see the page with styling.

Screenshots or Videos

No response

Platform

• OS: Fedora 41
• Browser: Firefox
• Version: 132.0.1

Additional context

No response

[schiller-manuel]

The problem is that these assets don't have the same hash, but the generated HTML doesn't seem to make a difference.

do you mean "generated CSS"?
did you compare the CSS files?

[depsimon]

The CSS files are identical, but the HTML is always referencing the CSS of the server-side import which is not accessible from the client.

[schiller-manuel]

but doesn't the hash describe the content somehow? so why do they have different hashes if they are identical?

[depsimon]

I'm not sure, could it be hash is also time-based?

[depsimon]

Okay, I double checked and you are right, the files are not 100% identical.
The SSR CSS file is missing a few directives from Tailwind such as .visible, .hidden, .table, .blur, etc..

Not sure if or how it's linked to Start though

[SeanCassiere]

This bug is still present after upgrading the tanstack packages to latest, bumping vinxi to 0.5.1, and setting the vite override to 6.0.3 🤔

[glecetre]

This may not be because of Start indeed, so I'd be happy to move it to a more relevant project of course!

I see there's the "information needed" tag but I'm not sure you need more information from me; how may I help?

[SeanCassiere]

@glecetre added the label in, just to mark that we currently have no clue where is this is originating from.

[richhost]

It seems to work on React 19.

@tanstack/start: 1.88.0
react: 19.0.0
react-dom: 19.0.0
vinxi: 0.5.1
tailwindcss: 4.0.0-beta.6

[NimmLor]

Had the same issues. Upgrading to React 19 did not fix it. However it works when using PostCSS instead of the vite plugin of Tailwind v4

[gianlazaro]

This issue still persists on Tailwind v4.0 stable release.

[schiller-manuel]

I found the solution here: https://discord.com/channels/486935104384532500/1314368269544722452/1314368269544722452

You need to set the base path explicitly so that both builds (client and server) are treated the same way (see also https://tailwindcss.com/docs/detecting-classes-in-source-files#setting-your-base-path)

e.g. in the reproducer:

diff --git a/app/styles/app.css b/app/styles/app.css
index 32ca3cc..8f0e000 100644
--- a/app/styles/app.css
+++ b/app/styles/app.css
@@ -1,4 +1,4 @@
-@import "tailwindcss";
+@import "tailwindcss" source("../");
 
 @layer base {
   html,

[max-programming]

Thanks @schiller-manuel your solution worked for me! Although VSCode shows invalid syntax. Let's see if there's a way to fix that