Broken theme due to Tailwind V4.0.5

[PierreB40]

Environment

• Operating System: Darwin
• Node Version: v22.13.1
• Nuxt Version: 3.15.4
• CLI Version: 3.21.1
• Nitro Version: 2.10.4
• Package Manager: npm@10.9.2
• Builder: -
• User Config: modules, plugins, devtools, css, compatibilityDate, eslint
• Runtime Modules: @nuxt/ui@3.0.0-alpha.12, @nuxt/eslint@0.7.6
• Build Modules: -

Is this bug related to Nuxt or Vue?

Nuxt

Version

v3.0.0-alpha.12

Reproduction

https://codesandbox.io/p/sandbox/purple-sunset-9qdqv3
Just upgrade Nuxt template to v3.0.0-alpha.12 and remove style from app.vue make preview without theme colors

Description

Tailwind v4.0.5 add optimization to compiled css that include only theme variable that are used

Additional context

Nuxt Template with v3.0.0-alpha.12 without style in app.vue

Nuxt Template with v3.0.0-alpha.10 without style in app.vue

Logs

[StirStudios]

For what it is worth you can set this in your package to pin to 4.0.4

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

[benjamincanac]

Yes that is the only solution for now, you can also use the resolutions in your package.json.

I'm not sure how to handle 4.0.5 with tailwindlabs/tailwindcss#16211 change yet 😬

[benjamincanac]

Here's a workaround until we figure it out with the Tailwind CSS team:

/* Don't do `@import "tailwindcss"`, do this instead: */
@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";

[TheAlexLichter]

Might work via @theme static (source)

[benjamincanac]

@TheAlexLichter This is what the previous workaround does (theme(static)), next week we'll be able to do @import "tailwindcss" theme(static); according to Adam.

But this is not the perfect solution as we won't be able to benefit from the CSS variables purge.

The issue here is Nuxt UI defines proxy CSS variables --ui-color-neutral-500: var(--color-slate-500); to handle App Config. However, since those are defined within this plugin and injected into the DOM, the var(--color-slate-500) is not being recognized by Tailwind CSS and therefore not defined 😬

[StirStudios]

@benjamincanac moving forward what do you propose? Pin 4.0.4 until Nuxt UI adds their special sauce, then upgrade?

Or give this ago?

Here's a workaround until we figure it out with the Tailwind CSS team:

/* Don't do @import "tailwindcss", do this instead: */
@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";

[benjamincanac]

@StirStudios You can use the provided workaround, this will have the same behavior as before with 4.0.4.

[StirStudios]

Great thanks for being such a valused community member!

[benjamincanac]

This has been reverted in Tailwind CSS 4.0.6, we'll open a new issue if they introduce it and there's still an issue 😊