Cannot start Nuxt with new Tailwind version

[tsiotska]

v4.0.1 -v4.0.3 (compatible with prev versions e.g. 3.)
NUXT 3.15.2
Node v20.12.2
@nuxtjs/tailwindcss: "^6.13.1",

I am not sure If issue refers to tailwind, I just downgraded to 3.4.17 and don't see message below anymore:

ERROR Cannot start 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.

Yes, I tried to install plugin and update postcss, it's just not the way it gotta work and indeed it doesn't. If anyone interested please take a better look than I did. :)

[RobinMalfait]

Hey!

Looks like you are configuring tailwindcss as a PostCSS plugin instead of @tailwindcss/postcss somewhere. Can you share a minimal reproduction repo so we can take a look?

Also make sure you follow all the steps described here: https://tailwindcss.com/docs/installation/framework-guides/nuxt

[uchedotphp]

I am also having this issue right now.

Nuxt 3.15.0 with Nitro 2.10.4                                                                                              nuxi 5:24:19 PM

[5:24:20 PM]  ERROR  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

[Foddie2]

Getting a similar error now after running
yarn add tailwindcss postcss autoprefixer

[joelawm]

Temporary fix was for me just resetting my package.json to
"postcss": "^8.4.47",
"tailwindcss": "^3.4.12"

Obviously this is temporary and not a direct fix but should allow you to continue working.

[eviannaive]

it work~~thank you😭

[chuang091]

This works for me!!!

[fischimglas]

worked for me! thanks a lot!

[ReinMengelberg]

Same issue here

[nuxi 11:21:53 AM]  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.

    at Xr (node_modules/tailwindcss/dist/lib.mjs:24:1715)
    at resolveCSSOptions (node_modules/@nuxt/vite-builder/dist/shared/vite-builder.Cj8nWFwN.mjs:1136:34)
    at async bundle (node_modules/@nuxt/vite-builder/dist/shared/vite-builder.Cj8nWFwN.mjs:1392:14)
    at async bundle (node_modules/nuxt/dist/shared/nuxt.CrJjphBv.mjs:6793:5)
    at async build (node_modules/nuxt/dist/shared/nuxt.CrJjphBv.mjs:6644:3)
    at async Promise.all (index 1)
    at async NuxtDevServer._load (node_modules/@nuxt/cli/dist/chunks/dev2.mjs:206:5)
    at async NuxtDevServer.load (node_modules/@nuxt/cli/dist/chunks/dev2.mjs:93:7)
    at async _applyPromised (node_modules/perfect-debounce/dist/index.mjs:54:10)

[ReinMengelberg]

If you guys are using nuxt, id recommend just to use the

"@nuxtjs/tailwindcss": "^6.13.1",

Package, this one comes with everything preconfigured

[Jamiemufu]

Does this include Tailwind 4? edit No it does not

[premiumwatchdevice]

In v4, follow the manual setup method instead of using @nuxtjs/tailwindcss,
https://tailwindcss.com/docs/installation/framework-guides/nuxt

then in the style.css file import :

@import "tailwindcss";
@config "../../tailwind.config.js";

to import plugin directive,
Use the @plugin directive to load a legacy JavaScript-based plugin: https://tailwindcss.com/docs/functions-and-directives

[devFerzen]

to ensure that tailwind work... I think that if we are already using nuxt 3 we need to stick still with tailwind version 3 stuff and avoid manuall installations, so the things I do, to clear out the errors of tailwind and nuxt were:

1. Avoided manual installation of Tailwind CSS(nuxt 3 already includes postcss and so... its unnecessary)
2. ensured a Tailwind CSS version 3 structure
   tailwind base; @tailwind components; @tailwind utilities;
   3.Configured Tailwind within nuxt.config.ts and removed conflict configuration
   export default defineNuxtConfig({ compatibilityDate: '2024-11-01', devtools: { enabled: true }, postcss: { plugins: { tailwindcss: {}, autoprefixer: {}, } }, css: ['~/assets/css/tailwind.css'], ...

hope it helps. I also reviewed and commented on similar errors I noticed when manually implementing Tailwind installation on the following git discussion

nuxt/ui#3139

[sofuxro]

I had installed @nuxt/ui as nuxt module. I then installed @nuxtjs/tailwindcss (as a nuxt module) not knowing that the nuxt/ui already included tailwindcss.
and gave the error

ERROR Cannot start nuxt: It looks like you're trying to use tailwindcss directly as a PostCSS plugin...

Removing the @nuxtjs/tailwindcss nuxt module got rid of the error and tailwindcss worked as expected.
Hope this help for anyone in similar situation 😏

[StaticSphere]

Thanks! I'm going through a Udemy course, and your recommendation fixed this issue for me. Cheers!

[a1300]

Thanks!

[Dev-Adventure]

Keep in mind that you can't use both @nuxt/ui and shadcn-nuxt together.

If you have both installed, remove @nuxt/ui from your dependencies (using npm, yarn, or any other package manager) and also remove its mention from the modules section in nuxt.config.ts.