Changes in Tailwind CSS v4

[ineshbose]

Hi everyone,

I'm creating this issue to get an idea from the users of this module about certain changes and features in Tailwind CSS v4 that they'd like this module to integrate with.

If you haven't already, do give a read to the v4 prerelease documentation that covers all the changes:
https://tailwindcss.com/docs/v4-beta

I mention in #790 that this module mostly aims at installing and configuring Tailwind to your Nuxt project a breeze, and with this new version, Tailwind CSS has made it even easier; still, there are minor steps like configuring Vite within Nuxt (or webpack/other builders using PostCSS), setting up CSS, merging all the Nuxt layers, etc -- this is where the module would still be required.

There are a few more things that have changed in Tailwind CSS v4 that heavily influence on the approach for the next version of this module; I'm hoping to get comments on these functionalities (and more general bits I may have missed).

Configuration

Previously Tailwind required us to create a tailwind.config.js to enable minimum installation; this configuration file also helps in using plugins, safelists, and extending theme. This is no longer necessary, you can use v4 without a configuration file.

How would you configure the theme?

The idea of Tailwind v4 is that it will be more tailwind.css configuration focused, than tailwind.config.cjs (based on my understanding from this video). So, you have the @theme directive. Read more about this here - https://tailwindcss.com/docs/v4-beta#customizing-your-theme

With that said, any (existing) configuration files can still be used in v4 - https://tailwindcss.com/docs/v4-beta#using-legacy-configuration-files - but it will not be highly configurable through this approach (also note the usage of word "legacy").

Content Configuration

When creating a tailwind.config file, you were required to specify resolvable paths to your source code in the content property. This module also did that for you, so it wasn't necessary. However, projects have different natures of organising source code. Moreover, a file may exist in the tracker but not in the app lifecycle/tree; the class utilities from that file would still contribute to the final CSS.

Tailwind v4 now looks at the module graph and detects utilities accordingly. Still, paths can be configured explicitly; read https://tailwindcss.com/docs/v4-beta#configuring-source-detection.

Exposed CSS variables

There was a little section in Tailwind v3 docs about referencing (configuration) in JavaScript. Here again this module provided an exposeConfig feature 👼 that would provide tree-shakable, typed values to your configurations.

Tailwind v4 is based on CSS variables now, and the resolveConfig function is not exported anymore. https://tailwindcss.com/docs/v4-beta#referencing-theme-values-in-js

---

Given some of the changes pointed above, I'm trying to brainstorm on where we go next. It may be possible to maintain the current usage of the module to work with v4, but it may not enable its best potential. We can also change into a tailwind.css based module (have the module generate it and automatically integrate) which seems like a nice idea. We could just be a simple Vite/PostCSS plugin installer too 😄

So here's what I'm hoping to hear from you:

1. are there current features from the module that you use and heavily rely on? (hooks, exposeConfig, etc)
2. how much configuration do you tend to use for Tailwind, and if you'd move to using the new @theme, @plugin, etc. directives?
3. is there anything in Tailwind v4 changes that you would want the module to bank on (like no longer providing our own content paths to use automatic detection, and also remove exposeConfig to use CSS variables), or possibly still have those abilities (that may not be as-usable at their best potential)?

Let me know what you all think. I'm excited to take this new exciting route that hopefully everyone can enjoy!

[MickL]

Personally I "just" want to use Tailwind in my Nuxt project. Since v4 has first class Vite support, I question if a Nuxt module is still needed or what benefits it would have. I was happy when Nuxt Tailwind provided reloading when changing something in the tailwind.config.ts but apparently this is no more needed. I use Nuxt layers but I guess this doesnt affect Tailwind. I only barely use the devtools but if, I never used them for anything Tailwind related.

What is really annoying is that every use of dynamic classes is not catched by Tailwind atm. At the beginning the behavior seemed buggy to me because styles were working and then suddenly not anymore and I couldnt figure out why. After figuring out and understanding the problem the only solution then is to put the classes in the safelist. But I guess there is nothing Nuxt Tailwind could do?

[hacknug]

I don't heavily rely on it but being able to use tw() (aka editorSupport) was really nice.

[patriktoth67]

Personally I "just" want to use Tailwind in my Nuxt project. Since v4 has first class Vite support, I question if a Nuxt module is still needed or what benefits it would have. I was happy when Nuxt Tailwind provided reloading when changing something in the tailwind.config.ts but apparently this is no more needed. I use Nuxt layers but I guess this doesnt affect Tailwind. I only barely use the devtools but if, I never used them for anything Tailwind related.

What is really annoying is that every use of dynamic classes is not catched by Tailwind atm. At the beginning the behavior seemed buggy to me because styles were working and then suddenly not anymore and I couldnt figure out why. After figuring out and understanding the problem the only solution then is to put the classes in the safelist. But I guess there is nothing Nuxt Tailwind could do?

Same here, "just" want to use Tailwind v4 because of Nuxt UI v3.

[MickL]

I tried Nuxt UI 3 with Tailwind 4 a lot already. As far as I see they dont use Nuxt/Tailwind. Works like a charm.

EDIT: Also tried on a blank Nuxt project. Installation was super easy:

bun add tailwindcss @tailwindcss/vite

Add this to Nuxt config:

  css: ['~/assets/css/main.css'],
  vite: {
    plugins: [tailwindcss()],
  },

And create this css file:

@import "tailwindcss";

When addind/removing Tailwind classes the changes are applied without any delay. Really incredible speed.

I dont know if there is a need for a Nuxt Tailwind module anymore?