Nuxt•2mo ago

Cannot use tailwind with Nuxt UI

My nuxt.config.ts:

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
    compatibilityDate: "2025-07-15",
    devtools: { enabled: true },

    modules: ["@nuxt/ui", "@nuxtjs/tailwindcss"],
});

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
    compatibilityDate: "2025-07-15",
    devtools: { enabled: true },

    modules: ["@nuxt/ui", "@nuxtjs/tailwindcss"],
});

Running this gives an error when running bun dev:

 ERROR  Cannot restart nuxt:  It looks like you're trying to use tailwindcss directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install @tailwindcss/postcss and update your PostCSS configuration.

 ERROR  Cannot restart nuxt:  It looks like you're trying to use tailwindcss directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install @tailwindcss/postcss and update your PostCSS configuration.

Using nuxt 4.0.1, @nuxtjs/tailwindcss 6.14.0, and @nuxt/ui 3.3.0. If I just use Nuxt UI, there is no tailwind in my app.

27 Replies

kapa.ai•2mo ago

Hi @Dog. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The error you’re seeing is due to a conflict between how Tailwind CSS is integrated in Nuxt 4 and the use of the @nuxtjs/tailwindcss module. With Nuxt UI v3 (and Nuxt 4), Tailwind CSS v4 is expected to be configured via CSS imports, not as a separate Nuxt module. How to fix: - Remove the @nuxtjs/tailwindcss module from your modules array. - Instead, create a CSS file (e.g., app/assets/css/main.css) and import both Tailwind CSS and Nuxt UI in it:

/* app/assets/css/main.css */
@import "tailwindcss";
@import "@nuxt/ui";

/* app/assets/css/main.css */
@import "tailwindcss";
@import "@nuxt/ui";

- Then, in your nuxt.config.ts, add this CSS file to the css array:

export default defineNuxtConfig({
  compatibilityDate: "2025-07-15",
  devtools: { enabled: true },
  modules: ["@nuxt/ui"],
  css: ["~/assets/css/main.css"]
})

export default defineNuxtConfig({
  compatibilityDate: "2025-07-15",
  devtools: { enabled: true },
  modules: ["@nuxt/ui"],
  css: ["~/assets/css/main.css"]
})

This approach follows the official Nuxt UI and Tailwind v4 integration for Nuxt 4. The @nuxtjs/tailwindcss module is not needed and will cause conflicts, as Tailwind is now handled via CSS imports and PostCSS, not as a Nuxt module. You do not need to manually add Tailwind as a PostCSS plugin either—Nuxt handles this internally when you use the CSS import method Nuxt UI Installation Guide. Summary:
- Remove @nuxtjs/tailwindcss from modules - Use CSS imports for Tailwind and Nuxt UI - Add your CSS file to the css array in nuxt.config.ts This should resolve the error and allow you to use Tailwind with Nuxt UI in Nuxt 4 Nuxt UI Installation Guide. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@634054240557596672> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

DogOP•2mo ago

im just using the nuxt cli i dont get why i need to do that but whatever that fixed it

MuntasirSZN•2mo ago

Are styles working? I suspect not. Easy way to do it is to follow tailwindcss docs

DogOP•2mo ago

they weren't but kapa's solution fixed it i wouldve thought it would just be plug and play instead of having to have a css file

MuntasirSZN•2mo ago

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

Install Tailwind CSS with Nuxt

Setting up Tailwind CSS in a Nuxt project.

MuntasirSZN•2mo ago

@Dog follow this.

DogOP•2mo ago

the ai solution fixed it its fine

MuntasirSZN•2mo ago

There is a issue with nuxt tailwindcss module. Interesting, what deps are installed? Even though you are using kapas solution, i would say to remove all tailwind deps, and follow tailwindcss. I think you have that module installed. You only need two dev deps, @tailwindcss/vite and tailwindcss.

DogOP•2mo ago

the tailwind docs dont specify -D are u sure dev deps?

MuntasirSZN•2mo ago

Yep Tailwindcss doesnt go to prod (i mean the whole thing, just the utility classes) It scans your files, adds the used utility classes in your files, then creates a css file with all of them.

DogOP•2mo ago

done that do i need the vite plugin since i assume nuxt ui does that?

MuntasirSZN•2mo ago

Yep Just follow tailwindcss docs

DogOP•2mo ago

alr

MuntasirSZN•2mo ago

When the tailwindcss module is fixed, change to that (i mean why not)

DogOP•2mo ago

MuntasirSZN•2mo ago

Both of them should be dev deps

DogOP•2mo ago

do u also happen to know why my app.config.ts isnt being applied?

MuntasirSZN•2mo ago

Where did you place it?

DogOP•2mo ago

root oh does it need to be in /app

MuntasirSZN•2mo ago

It should be in app/app.config.ts Yep

DogOP•2mo ago

that makes more sense thanks

Cake•2mo ago

don't use the tailwind nuxt plugin, just the follow the installation guide from the tailwindcss docs there's nothing special about the tailwind plugin

MuntasirSZN•2mo ago

tailwind config viewer..... Also zero config one command is nicer.... @Dog @Cake Fun fact: you don't need to setup tailwindcss if you are using nuxt ui (the vite plugin). Just follow tailwind docs, skip the @tailwindcss/vite parts. Found this in there source code....?

DogOP•2mo ago

you do because just with nuxt ui it didnt work

MuntasirSZN•2mo ago

No i think you misunderstood 1. Install nuxt ui wuth nuxi module add 2. Follow nuxt/ui's installation guide Which is Create the app/assets/css/main.css Paste @import "tailwindcss"; @import "@nuxt/ui"; Add it to nuxt.config.ts css: ["@/assets/css/main.css"] Thats it Nuxt ui comes with tailwindcss installed, and it also configures @tailwindcss/vite if bundler option in nuxt config is @nuxt/vite-bundler (which is by default) or it uses @tailwindcss/postcss

DogOP•2mo ago

ah right

Gaming

Programming

Cannot use tailwind with Nuxt UI

Did you find this page helpful?