Tailwind V4.0

[GeorgeNance]

Is your feature request related to a problem? Please describe.

No problem yet, more of eager to try the latest tailwind with Nuxt

Describe the solution you'd like

Integration with v4 of tailwind. Or instructions on how to do it

Describe alternatives you've considered

N/A

Additional context

https://tailwindcss.com/blog/tailwindcss-v4-alpha

[atinux]

You should be able to try with a standard installation for now: https://tailwindcss.com/docs/guides/nuxtjs

[pi0]

Here you go: Just made an experimental/temporary module to try v4: https://github.com/pi0/nuxt-tailwindcss4

Currently it does add vite plugin (which uses oxide engine)

[ineshbose]

I believe the standard installation for V4 would be this - https://tailwindcss.com/blog/tailwindcss-v4-alpha?ref=upstract.com#using-post-css

Support for v4 is on the roadmap, see #790 but there's still a lot of changes required on v4 for the migration to be smooth - https://tailwindcss.com/blog/tailwindcss-v4-alpha?ref=upstract.com#roadmap-to-v4-0

[atinux]

Also see https://www.codybontecou.com/tailwind-css-v4-and-nuxt.html

[MickL]

Do I understand correctly: No more need for @nuxtjs/tailwindcss with Tailwind 4 due to Tailwinds first-class support for Vite?

[ineshbose]

Do I understand correctly: No more need for @nuxtjs/tailwindcss with Tailwind 4 due to Tailwinds first-class support for Vite?

Unlikely. The module will still be useful in providing and enabling lot more support and features for Nuxt Layers, Devtools, etc. Plus Nuxt supports build tools other than Vite! It'll all be much clearer as v4 comes out of alpha I hope!

[Mensix]

Any updates on progress as Tailwind v4 just went into beta stage?

[ineshbose]

Any updates on progress as Tailwind v4 just went into beta stage?

Yes, so we are still quite well on track for v7, but I'm also now looking to backport and provide (experimental) support for Tailwind v4 sooner in v6. There's an open PR that removes imports of Tailwind v3 utilities so that will help us make this possible in the next release.

[ineshbose]

Request for comments - #919!

[ojvribeiro]

Also see https://www.codybontecou.com/tailwind-css-v4-and-nuxt.html

Link is broken 🙁

[aparajita]

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 const tw = <T extends TemplateStringsArray | string>(tailwindClasses: T) => tailwindClasses

In your editor's tailwind config, under experimental:

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

Voilà!