How to render css from Tailwind 4 in ssr?

[sebastianwd]

Running a fresh create-tsrouter-app with the Tailwind add-on.

Steps:

1. Build the application and serve it with pnpm start,
2. Check the network tab
3. Tailwind styles are not rendered server side

I've never had a problem making the server html come styled when using Next.js and Tailwind 3. This might seem minor but in slow connections and with no cache I can easily get a flash of unstyled content.

[meouwu-dev]

Assuming the Tailwind CSS file is located at src/styles/app.css, here is my vite.config.ts. This configuration generates a hash for the app.css file before the build and uses it when the asset file name equals app.css:

... // the rest
import fs from "fs";
import crypto from "crypto";

// Generate a hash for the CSS file to ensure unique asset names
const css = fs.readFileSync("src/styles/app.css");
const cssHash = crypto
  .createHash("sha256")
  .update(css)
  .digest("hex")
  .slice(0, 8);

export default defineConfig({
  ...,
  plugins: [
    tsConfigPaths({
      projects: ["./tsconfig.json"],
    }),
    tanstackStart({ target: "node-server" }),
    tailwindcss(),
  ],
  build: {
    rollupOptions: {
      output: {
        assetFileNames: (assetInfo) => {
          if (
            assetInfo.names &&
            assetInfo.names[assetInfo.names.length - 1] === "app.css"
          ) {
            return `assets/app-${cssHash}.css`;
          }
          return `assets/[name]-[hash][extname]`;
        },
      },
    },
  },
});

---

The SSR output (.output/server/chunks/_/ssr.mjs) references a CSS file that is different from the client-side CSS file (.output/public/.vite/manifest.json).
I guess this happens because the SSR version is hashed before Tailwind CSS transforms app.css. If you check the network tab, you'll see that the page first tries to load a CSS file (the SSR one), but receives a 404 error. It then successfully loads the client-side CSS file (the one actually built into the output assets folder). As a result, SSR styles do not work as expected.

I am using target = 'node-server', so I'm not sure if this workaround will work with other targets.