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?

[martinszeltins]

I came here looking for a way to try out the new Tailwind 4 Beta with Nuxt but it looks like people are saying that there isn't even a real need for a tailwind Nuxt module.

[ineshbose]

I came here looking for a way to try out the new Tailwind 4 Beta with Nuxt but it looks like people are saying that there isn't even a real need for a tailwind Nuxt module.

You can try this out for the time being: https://github.com/pi0/nuxt-tailwindcss4

[ineshbose]

So let me do mention, in case I didn't, I'm open to the idea of not taking the module forward.

With that said, there are still minor DX improvements we can provide on top of Tailwind v4. The bare minimum I would think is:

1. Install Vite or PostCSS plugin automatically
2. Auto-add generated CSS template to nuxt.options.css (based on layers, etc), or auto detect if assets/css/tailwind.css exists and inject that (this is where @nuxt/ui or other modules can also build upon, so you don't need to add it yourself).

With the above, you're not having to update anything in your nuxt.config (except add @nuxtjs/tailwindcss to modules) - so that's your "just" want to use Tailwind v4. Again, quite a minor benefit, but if it makes a difference to your project (or not) - either way works.

~~(Edit: Let me also update the module linked above to the functionality I've mentioned here.)~~ Done

[MickL]

You can try this out for the time being: https://github.com/pi0/nuxt-tailwindcss4

No need for any module as I wrote above!

[hacknug]

With that said, there are still minor DX improvements we can provide on top of Tailwind v4.

Agreed. There was also no need to use the module before if you configured PostCSS manually so I'm not sure why people feel things have changed so much.

I believe tw and the config viewer are reason enough to justify having this module around. Plus being able to just nuxi module add tailwindcss and have everything working at once seems like a no brainer for me.

These replies also sound a little like survivorship bias to me. The only people I would expect to comment on a GitHub issue discussing a future version of a module, are the those who are probably comfortable enough to set things up on their own. I'm pretty sure there will be lots of people asking/complaining if there is no module in the future.

[martinszeltins]

I believe tw and the config viewer are reason enough to justify having this module around. Plus being able to just nuxi module add tailwindcss and have everything working at once seems like a no brainer for me.

I agree, I think Nuxt people are used to installing modules with nuxi module add tailwind so this is definitely a big plus. And it would feel strange if tailwind didn't have it.

[patriktoth67]

Can anyone help me? I changed my project, installed tailwind v3 configuring PostCSS manually. Then I run npx @tailwindcss/upgrade@next changed to this in nuxt.config.ts:

    css: ["~/assets/css/main.css"],

    postcss: {
        plugins: {
            "@tailwindcss/postcss": {},
        },
    },

And I get this error:

[10:21:30 AM]  ERROR  Cannot restart nuxt:  Package subpath './nesting' is not defined by "exports" in C:\Users\user\Projects\project\livechat-app\frontend\node_modules\tailwindcss\package.json

  at __node_internal_captureLargerStackTrace (node:internal/errors:496:5)
  at new NodeError (node:internal/errors:405:5)
  at exportsNotFound (node:internal/modules/esm/resolve:359:10)
  at packageExportsResolve (node:internal/modules/esm/resolve:695:9)
  at resolveExports (node:internal/modules/cjs/loader:567:36)
  at Module._findPath (node:internal/modules/cjs/loader:636:31)
  at Module._resolveFilename (node:internal/modules/cjs/loader:1063:27)
  at Function.resolve (node:internal/modules/cjs/helpers:116:19)
  at Function._resolve [as resolve] (node_modules\jiti\dist\jiti.js:1:241814)
  at resolveModule (/C:/Users/user/Projects/project/livechat-app/frontend/node_modules/@nuxt/kit/dist/index.mjs:2224:29)
  at requireModule (/C:/Users/user/Projects/project/livechat-app/frontend/node_modules/@nuxt/kit/dist/index.mjs:2229:24)
  at resolveCSSOptions (/C:/Users/user/Projects/project/livechat-app/frontend/node_modules/@nuxt/vite-builder/dist/shared/vite-builder.C2KjQmF9.mjs:1076:22)
  at bundle (/C:/Users/user/Projects/project/livechat-app/frontend/node_modules/@nuxt/vite-builder/dist/shared/vite-builder.C2KjQmF9.mjs:1564:14)
  at async bundle (/C:/Users/user/Projects/project/livechat-app/frontend/node_modules/nuxt/dist/index.mjs:5596:5)
  at async Promise.all (index 1)
  at async build (/C:/Users/user/Projects/project/livechat-app/frontend/node_modules/nuxt/dist/index.mjs:5468:5)
  at async Promise.all (index 1)
  at async NuxtDevServer._load (/C:/Users/user/Projects/project/livechat-app/frontend/node_modules/nuxi/dist/chunks/dev2.mjs:6920:5)
  at async NuxtDevServer.load (/C:/Users/user/Projects/project/livechat-app/frontend/node_modules/nuxi/dist/chunks/dev2.mjs:6810:7)
  at async _applyPromised (/C:/Users/user/Projects/project/livechat-app/frontend/node_modules/nuxi/dist/chunks/dev2.mjs:3804:10)

What am I missing or doing wrong?

[martinszeltins]

@patriktoth67 I think you don't need postcss anymore

[patriktoth67]

Actually nevermind, I found out I cannot even upgrade yet, becouse Nuxt UI pro v3 is not yet finished and we are heavily using it.

[maxdzin]

I just tried to use TW v4 without the Nuxt module. I made all the setup things described in the v4 docs: Installed pnpm add tailwindcss@next @tailwindcss/vite@next Added this in nuxt.config.ts:

  css: ['~/assets/styles/main.scss'],

  vite: {
    plugins: [tailwindcss()],
  },

Instead of declaring all the theme things in the css file, I tried to use scss. But TW styling is not working. Could someone share some advice on how to make it work? @MickL maybe you tried using scss file also and got successful results with that?

[martinszeltins]

I tried to use scss. But TW styling is not working.

Probably should not use scss but css

[maxdzin]

@martinszeltins Yes, that one works. Thank you. It is interesting how to go with scss. Digging...

[MickL]

No need for scss when using Tailwind. Apply classes like this:

h1 {
   @apply font-bold;
   @apply text-2xl;
}

[maxdzin]

@MickL yes, I know that is not necessary. But what if I want to use the powers of scss? That's why I'm trying to make it that way.

[ineshbose]

Could this be related?

https://github.com/tailwindlabs/tailwindcss/issues/14376

[MickL]

If you use the powers of Tailwind you dont need any scss ever again

[maxdzin]

Could this be related?

tailwindlabs/tailwindcss#14376

@ineshbose It looks like

[maxdzin]

If you use the powers of Tailwind you dont need any scss ever again

Well, it looks like with v4 this may indeed be the case, given the improvements that have been (and will be) made in the new version. Although, of course, there may be some projects and some features that may require other tools (like SCSS).

[MickL]

What exactly? I think the whole purpose of Tailwind is not to write css or scss again.

[maxdzin]

Hey everyone! Is dark/light theme switching working for the current v4.0.0-beta.9? Could someone share simple instructions on how to make it work? Thanks!

[hacknug]

Hey everyone! Is dark/light theme switching working for the current v4.0.0-beta.9? Could someone share simple instructions on how to make it work? Thanks!

This is not the place to ask for this but, according to the v4 alpha release blog post, dark mode is only supported via media queries:

• Support for other dark modes — right now we only support dark mode using media queries, and still need to reimplement the selector and variant strategies.

Not sure if anything changed in the latest betas as that is the strategy I use in the projects were I tested v4.

[aparajita]

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

Tailwind v4 is working fine without a module. BTW, the prerelease v4 site is available here: https://v4-test.tailwindcss.com/docs/installation/framework-guides/nuxt

pnpm add tailwindcss@next @tailwindcss/vite@next

nuxt.config.ts

import tailwindcss from '@tailwindcss/vite'

export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },
  css: ['~/assets/css/main.css'],
  vite: {
    plugins: [tailwindcss()],
  },
})

assets/css/main.css

@import "tailwindcss";

For tw support:

Add utils/tw.ts:

export function tw(strings: TemplateStringsArray): string {
  // A Tailwind class should never be dynamically generated,
  // so we can safely return the first string in the array.
  return strings[0]
}

In your editor's tailwind config, under experimental:

"classRegex": ["tw`(.*?)`", "tw\\('(.*?)'\\)", "tw\\(\\s*('(.*?)'|\"(.*?)\")\\s*\\)"]

Voilà!

[MickL]

Thats what I posted already: https://github.com/nuxt-modules/tailwindcss/issues/919#issuecomment-2527798954

[aparajita]

@MickL Yes, thank you, that's how I got the first part, should have mentioned you. Just wanted to add the tw bit for completeness and have it all in one place.

[thehouseisonfire]

New installation guide: https://tailwindcss.com/docs/installation/framework-guides/nuxt

[MickL]

Also v4 is out since yesterday :) https://tailwindcss.com/blog/tailwindcss-v4