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!

[gabriel-mazieri727]

while any other answer in this thread doesn't work, this alternative "unlocks" the project so I can continue developing but in the other hand I still gets this message here:

terminal output:

[14:54:35]  ERROR  Pre-transform error: Can't resolve 'tailwindcss' in '/home/gabrielm/work/eldorado-prime-admin-web-v2/assets/css'
  Plugin: @tailwindcss/vite:generate:serve
  File: /home/gabrielm/work/eldorado-prime-admin-web-v2/assets/css/main.css

assets/css/main.css:

@import "tailwindcss";

package.json dependencies:

  "dependencies": {
    "@tailwindcss/postcss": "^4.1.6",
    "@tailwindcss/vite": "^4.1.6",
    "autoprefixer": "^10.4.21",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "lucide-vue-next": "^0.510.0",
    "nuxt": "^3.17.3",
    "postcss": "^8.4.47",
    "tailwindcss": "^3.4.12",
    "shadcn-nuxt": "^2.1.0",
    "tailwind-merge": "^3.3.0",
    "tw-animate-css": "^1.2.9",
    "vue": "^3.5.13",
    "vue-router": "^4.5.1"
  },

postcss.config.js:

module.exports = {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

tailwind.config.js:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./app.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

➜ ✗ node -v
v22.14.0
➜ ✗ npm -v
10.9.2

[RobinMalfait]

@gabriel-mazieri727 you are using "@tailwindcss/postcss": "^4.1.6" which is for Tailwind CSS v4, but you also have "tailwindcss": "^3.4.12", installed which is Tailwind CSS v3.

Make sure you are using the correct versions everywhere.

[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

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

[YuWeiGa]

Thanks!

[dev01atthaporn]

I read this and realized, I also run an install command for @nuxtjs/tailwindcss. I decided to npm uninstalled it but then it responded Cannot start nuxt: Could not load @nuxtjs/tailwindcss. Is it installed? What should I do?

[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.

[HoshinoSuzumi]

Is there really no other way?

[cxo-jutz]

i tried multiply approaches and even tho the watcher runs without errors it doesn't seem like tailwind classes are working.
package.json

"@nuxt/eslint": "1.3.0",
"@storyblok/nuxt": "6.2.4",
"@tailwindcss/vite": "4.1.4",
"eslint": "9.25.1",
"eslint-config-prettier": "10.1.2",
"nuxt": "3.17.1",
"prettier": "3.5.3",
"tailwindcss": "4.1.4",
"typescript": "5.8.3",
"vue": "3.5.13"

nuxt.config.ts

import tailwindcss from '@tailwindcss/vite';
css: ['~projectAlias/assets/css/app.css'],
vite: {
    plugins: [tailwindcss()],
},

app.css
@import 'tailwindcss';

template.vue

<template>
    <h1 class="text-3xl font-bold underline text-[#50d71e]">Hello world!</h1>
    <div class="bg-mint-500">Cyan?</div>
</template>

-> does absolutely nothing.

I do not have a tailwind.config but i assumed it would use a default one, plus i tried adding one but also without any difference.
I tried looking at it with ChatGPT but it absolutely insists that the approach with the vite package is wrong even tho it is what the documentation does.

[cxo-jutz]

i got it to work with Tailwind 4!! What seems so have been missing was @import 'tailwindcss' source(none); in my app.css (packages/project-app/assets/css/app.css).
I could then refer to the project folders with @source './../../../project-app';

[rozsazoltan]

Related:

• What's breaking changes from v4?
• Problem installing TailwindCSS after npx tailwindcss init command - tailwindcss not recognized - npm error could not determine executable to run
• How to use TailwindCSS v4 & Vite without PostCSS
• Separated PostCSS plugin for TailwindCSS
• Removed @tailwind directives

[veverre]

I was blocking with the same error.

After few research, it appears that my tailwind.config.js was in the old format after generating it.

// Wrong old format

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

I've done this and it now works like a charms:

// New format

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    './components/**/*.{vue,js,ts}',
    './layouts/**/*.vue',
    './pages/**/*.vue',
    './app.vue',
    './plugins/**/*.{js,ts}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

I hope it can help !