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à!

[MickL]

If you guys use @nuxt/fonts, dont forget to set processCSSVariables to true as written in the docs

Also linking #919 which is kinda a duplicate

[Yasso9]

For tw support:

Add composables/tw.ts:

export const tw = <T extends TemplateStringsArray | string>(tailwindClasses: T) => tailwindClasses

I think it's better to put it in utils/tw.ts. The composables directory is intended for functions that actually leverage Vue’s Composition API features. Placing the tw helper in utils should be more semantically accurate.

By the way, here is the official tailwind guide of installing tailwind with Nuxt : https://tailwindcss.com/docs/installation/framework-guides/nuxt

[aparajita]

For tw support:
Add composables/tw.ts:
export const tw = <T extends TemplateStringsArray | string>(tailwindClasses: T) => tailwindClasses

I think it's better to put it in utils/tw.ts. The composables directory is intended for functions that actually leverage Vue’s Composition API features. Placing the tw helper in utils should be more semantically accurate.

By the way, here is the official tailwind guide of installing tailwind with Nuxt : https://tailwindcss.com/docs/installation/framework-guides/nuxt

You are correct, updated accordingly.

[MickL]

Did anyone make it work with Nuxt layers? Problem is that Nuxt layers are not used as source files and therefor styles are missing.

What I do atm is adding the source in my main.css:

@import "tailwindcss";
@source "../../../../../packages/shared";

[j0rgedev]

Hey @MickL is that the only workaround that you found? It's still not working with nuxt 3.16

[MickL]

I did not. I tried using the package name that I used in nuxt.config extends with no success:

@import "tailwindcss";
@source "@my-scope/shared";

Automatic layers support might be a reason for a new lightweight @nuxtjs/tailwindcss release if there is no other option than relative paths @GeorgeNance

[fabianwohlfart]

[plugin:@tailwindcss/vite:generate:serve] Cannot apply unknown utility class: text-md
Any ideas? Seems like text-md is not yet available. In components it works just fine.

nuxt.config.js

  css: [
    '~/assets/css/tailwind.css',
    '~/assets/css/main.css',
  ],

tailwind.css

@import 'tailwindcss';

@theme {
  --text-md: 0.625rem;
}

main.css or app.vue

body {
  @apply text-md;
}

[lrstanley]

@fabianwohlfart you will need to use the @reference directive inside of your components or pages, in order to use tailwind utility classes inside @apply inside of those components or pages.

ref: https://tailwindcss.com/docs/functions-and-directives#reference-directive

example:

<style>
@reference "@/assets/css/main.css"; // this has my "@import tailwindcss" import ref

.bottom-bar {
  line-height: 1.4;
  @apply text-[1.15rem] md:text-[0.95rem];
}

.bar-item {
  @apply px-2 rounded-br-sm inline-flex text-zinc-400 align-middle cursor-pointer transition hover:bg-zinc-800 text-sm;
}
</style>

This is a change with tailwind v4 itself.

[henryzt]

@reference "@/assets/css/main.css";

It would be awesome if this can be automatically added to each sfc with the plugin somehow