Tailwind CSS v4 styles disappear after Nuxt 4 build using @tailwindcss/vite

[Sjoerd]

What version of Tailwind CSS are you using?

@tailwindcss/vite@0.1.1
Nuxt 3.17 with compability mode @ 4.0
npm 11.4.2
node 23.8.0```


# Describe the bug
When using Tailwind CSS v4 in a Nuxt 4 project with Vite and the recommended setup via @tailwindcss/vite, everything works perfectly in development (npm run dev).

However, after building (npm run build) and previewing (npm run preview), all Tailwind styles disappear. The expected stylesheet flashes for a split second and then completely disappears. The result is a blank page with no styling.

This happens consistently in SSR mode.


# Expected behavior
Tailwind styles should render identically in development and production (build + preview). Styles should not disappear after hydration or client-side boot.


# Config

import tailwindcss from '@tailwindcss/vite'
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
ssr: true,
compatibilityDate: '2024-11-01',
devtools: { enabled: process.env.NODE_ENV !== 'production' },
css: ['~/assets/css/main.css'],

future: {
compatibilityVersion: 4,
},

....
vite: {
server: {
allowedHosts: ['vanlandoptafel.nl', 'www.vanlandoptafel.nl', 'localhost']
},
plugins: [
tailwindcss()
],
....

# Additional info
- No hydration mismatch warnings
- CSS file is present in .output/public/_nuxt/
- No errors in console or terminal

[Sjoerd]

Build:

Dev:

[wongjn]

Consider providing a git repo that reproduces the issue and we can take a look for you.

[Sjoerd]

I found out that this has nothing to do with NuxtJS or Tailwindcss itself, but with a hydration mismatch. Previously there was a small refresh (in Nuxt 3), in Nuxt 4 this "refresh" also occurs with a hydration mismatch, but after this refresh the css is no longer loaded.

By solving the hydration mismatch, the css problem is solved.