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

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

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

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.

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)

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

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

Package, this one comes with everything preconfigured

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

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 😏

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.

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.

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

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 !