NuxtUI and Tailwind doesn't work

[SantiagoGelvez]

What version of Tailwind CSS are you using?

"dependencies": {
"@nuxt/ui": "^2.21.1",
"@tailwindcss/vite": "^4.0.12",
"nuxt": "^3.16.0",
"postcss": "^8.5.3",
"tailwindcss": "^4.0.12",
"vue": "^3.5.13",
"vue-router": "^4.5.0"
},

What version of Node.js are you using?

node: v23.9.0
npm: 10.9.2

What browser are you using?

Firefox, Brave, Chrome

What operating system are you using?

Ubuntu 24.04.2 LTS

Describe your issue

I can't use these versions of the package to work both with tailwind and nuxtUI together. I got this error:

npm run dev

> dev
> nuxt dev

Nuxt 3.16.0 with Nitro 2.11.5                                                                                                                   nuxi  10:26:17 AM
                                                                                                                                                      10:26:17 AM
  ➜ Local:    http://localhost:3000/
  ➜ Network:  use --host to expose

ℹ Using default Tailwind CSS file                                                                                                   nuxt:tailwindcss 10:26:18 AM
  ➜ DevTools: press Shift + Alt + D in the browser (v2.2.1)                                                                                           10:26:18 AM


 WARN  Failed to load config ./.nuxt/nuxtui-tailwind.config.mjs due to the error below. Skipping..                                   nuxt:tailwindcss 10:26:18 AM
 Package subpath './lib/lib/defaultExtractor.js' is not defined by "exports" in /home/santiago/Castleberry/atomic-frontend/node_modules/tailwindcss/package.json

    at exportsNotFound (node:internal/modules/esm/resolve:314:10)
    at packageExportsResolve (node:internal/modules/esm/resolve:661:9)
    at resolveExports (node:internal/modules/cjs/loader:661:36)
    at Function._findPath (node:internal/modules/cjs/loader:753:31)
    at Function._resolveFilename (node:internal/modules/cjs/loader:1391:27)
    at Function.resolve (node:internal/modules/helpers:145:19)
    at jitiResolve (node_modules/jiti/dist/jiti.cjs:1:187220)
    at jitiRequire (node_modules/jiti/dist/jiti.cjs:1:189288)
    at import (node_modules/jiti/dist/jiti.cjs:1:199778)
    at .nuxt/nuxtui-tailwind.config.mjs:2:31

ℹ Nuxt Icon server bundle mode is set to local                                                                                                       10:26:18 AM
✔ Nuxt Icon discovered local-installed 1 collections: heroicons                                                                                      10:26:19 AM

[ nuxi  10:26:20 AM]  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.

    at Br (node_modules/tailwindcss/dist/lib.mjs:22:1720)
    at resolveCSSOptions (node_modules/@nuxt/vite-builder/dist/shared/vite-builder.0lB6n6pu.mjs:1104:34)
    at async bundle (node_modules/@nuxt/vite-builder/dist/shared/vite-builder.0lB6n6pu.mjs:1361:14)
    at async bundle (node_modules/nuxt/dist/shared/nuxt.B7-cu52A.mjs:7234:5)
    at async build (node_modules/nuxt/dist/shared/nuxt.B7-cu52A.mjs:7085:3)
    at async Promise.all (index 1)
    at async NuxtDevServer._load (node_modules/@nuxt/cli/dist/chunks/dev2.mjs:210:5)
    at async NuxtDevServer.load (node_modules/@nuxt/cli/dist/chunks/dev2.mjs:95:7)
    at async NuxtDevServer.init (node_modules/@nuxt/cli/dist/chunks/dev2.mjs:90:5)
    at async Object.run (node_modules/@nuxt/cli/dist/chunks/dev-child.mjs:83:5)

[RobinMalfait]

Hey!

I think that the current version of Nuxt UI relies on Tailwind CSS v3, if you want to use Tailwind CSS v4, switch to the alpha version of Nuxt UI: https://ui3.nuxt.dev/getting-started/installation/nuxt

[trentsteel777]

broken for me too