Tailwind CSS 4.0.8 not loading correctly

[alapeta]

Environment

• Mac OS
• Node version v20.18.1
• Nuxt v3.15.4

Is this bug related to Nuxt or Vue?

Nuxt

Version

v3.0.0-alpha13

Reproduction

1. follow installation from guide:

npx nuxi init -t ui3

2. start: npm run dev

Description

There are no colors, no buttons, no borders, no tailwind classes...

I am not sure what happened and when. Just discovered today after cleaning node_modules and reinstalling all packages that tailwind is not loaded correctly.

As you can see the same is for fresh install from provided starter.

Additional context

No response

Logs

[WillGyt]

Did a bit of digging and the issue seems to be coming from this commit.
For some reason styles work with tailwind version 4.0.0-beta.9 but not version 4.0.0

[alapeta]

@WillGyt
going back to 4.0.0-beta.9 did not solve the issue for me :-(

My current package.json for Starter project:

"dependencies": {
"@iconify-json/lucide": "^1.2.26",
"@iconify-json/simple-icons": "^1.2.25",
"tailwindcss": "4.0.0-beta.9",
"@tailwindcss/postcss": "4.0.0-beta.9",
"@tailwindcss/vite": "4.0.0-beta.9",
"@nuxt/ui": "^3.0.0-alpha.12",
"nuxt": "^3.15.4"
},
"devDependencies": {
"@nuxt/eslint": "^1.1.0",
"eslint": "^9.20.1",
"typescript": "^5.7.3"
}

Still no styles...

[StirStudios]

It seems there is a regression with the latest update of Tailwind 4.0.8 (dropped 2hrs ago).
https://github.com/tailwindlabs/tailwindcss/releases/tag/v4.0.8

Key changes for this issue are here:

Changed
Don't include theme variables that aren't used in compiled CSS (tailwindlabs/tailwindcss#16211, tailwindlabs/tailwindcss#16676)

---

This happened to us before and was resolved: #3275 @benjamincanac @WillGyt @alapeta

However it seems the same workaround still works for now:

Replace

@import 'tailwindcss';
@import '@nuxt/ui';

with

@layer theme, base, components, utilities;

@import 'tailwindcss/theme' layer(theme) theme(static);
@import 'tailwindcss/preflight' layer(base);
@import 'tailwindcss/utilities' layer(utilities);

/* Then import "@nuxt/ui": */
@import '@nuxt/ui';

[StirStudios]

Looking into this further the above workaround only partially helped. I went back to my original solution which was to set the pnpm manager like so:

 "pnpm": {
    "overrides": {
      "tailwindcss": "4.0.7",
      "@tailwindcss/node": "4.0.7",
      "@tailwindcss/postcss": "4.0.7",
      "@tailwindcss/vite": "4.0.7"
    }
  }

This will bring everything back to the last working version.

[WillGyt]

@StirStudios This worked, thanks so much.

[alapeta]

This workaround works for me also - both for Starter and my own project.
Thanks a lot @StirStudios 😃.

[schillerenrico]

yeah tailwind 4.0.8 breaks the current style import with the workaround, using 4.0.7 until fix comes out

[sandros94]

Indeed there has been a regression upstream. Fastest workaround, as suggested, is to pin 4.0.7 in your package.json via:

  "resolutions": {
    "tailwindcss": "4.0.7",
    "@tailwindcss/postcss": "4.0.7",
    "@tailwindcss/vite": "4.0.7"
  }

[stefanisarie]

@StirStudios thank you for the workaround, it worked for me too!

[meikuv]

@StirStudios thank you, it worked