NuxtUI and Tailwind doesn't work

[SantiagoGelvez]

Environment

"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"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4.0.12"
  }

Version

v2.21.1

Reproduction

Following a simple installation of Nuxt with tailwind and then adding NuxtUI module

Description

When I try to use simple tailwind classes on my code, with NuxtUI installed, I got an error. It seems on Logs section.

Additional context

No response

Logs

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)

[benjamincanac]

It might be because you have Tailwind 4 installed. It isn't compatible with Nuxt UI v2.

[SantiagoGelvez]

It might be because you have Tailwind 4 installed. It isn't compatible with Nuxt UI v2.

So, what can I do in this case? It means I have to revert Tailwind to V3?

[benjamincanac]

You don't have to install tailwindcss yourself, you can either use Nuxt UI v2 with Tailwind v3 or Nuxt UI v3 with Tailwind v4: https://ui3.nuxt.dev/

[michaeljclegg]

When upgrading to Nuxt 16 the components layout was not displayed correctly, it seemed that Tailwindcss was not functioning correctly (I am using Nuxt UI 2.21.1).
When I installed Nuxtjs/tailwindcss module 6.12.2 the problem was resolved

(please note that tailwindcss is installed together with Nuxt UI - therefore the module was not already installed)