[Bug]: The Installation guide for Nuxt doesn't work

[viocha]

Reproduction

https://www.shadcn-vue.com/docs/installation/nuxt.html

Describe the bug

[nuxi 01:26:23] 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 mn (/D:/IT/js/static/web-nuxt/node_modules/tailwindcss/dist/chunk-U7LQKMN6.mjs:35:2121)
at resolveCSSOptions (/D:/IT/js/static/web-nuxt/node_modules/@nuxt/vite-builder/dist/shared/vite-builder.Dzk61r0T.mjs:1129:34)
at async bundle (/D:/IT/js/static/web-nuxt/node_modules/@nuxt/vite-builder/dist/shared/vite-builder.Dzk61r0T.mjs:1390:14)    
at async bundle (/D:/IT/js/static/web-nuxt/node_modules/nuxt/dist/shared/nuxt.Cz1y6gQJ.mjs:7367:5)
at async build (/D:/IT/js/static/web-nuxt/node_modules/nuxt/dist/shared/nuxt.Cz1y6gQJ.mjs:7218:3)
at async Promise.all (index 1)
at async NuxtDevServer._load (/D:/IT/js/static/web-nuxt/node_modules/@nuxt/cli/dist/chunks/dev2.mjs:219:5)
at async NuxtDevServer.load (/D:/IT/js/static/web-nuxt/node_modules/@nuxt/cli/dist/chunks/dev2.mjs:111:7)
at async NuxtDevServer.init (/D:/IT/js/static/web-nuxt/node_modules/@nuxt/cli/dist/chunks/dev2.mjs:106:5)
at async Object.run (/D:/IT/js/static/web-nuxt/node_modules/@nuxt/cli/dist/chunks/dev-child.mjs:94:5)

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 AMD Ryzen 7 7840H with Radeon 780M Graphics
    Memory: 10.23 GB / 27.69 GB
  Binaries:
    Node: 22.15.0 - D:\Program Files\nodejs\node.exe
    npm: 10.9.2 - D:\Program Files\nodejs\npm.cmd
    pnpm: 10.10.0 - D:\ProgramData\Nodejs\npm\pnpm.cmd
  Browsers:
    Internet Explorer: 11.0.22621.3527

Contributes

• I am willing to submit a PR to fix this issue
• I am willing to submit a PR with failing tests

[localpurpose]

Try to remove module '@nuxtjs/tailwindcss' from nuxt.config.ts.

If not, try to remove it from package.json, package-lock.json and delete folder node_modules then npm install tailwindcss @tailwindcss/vite

Besides, check the file .aseets/css/tailwind.css exists and contains only 1 string: @import 'tailwindcss';

[viocha]

Try to remove module '@nuxtjs/tailwindcss' from nuxt.config.ts.

If not, try to remove it from package.json, package-lock.json and delete folder node_modules then npm install tailwindcss @tailwindcss/vite

Besides, check the file .aseets/css/tailwind.css exists and contains only 1 string: @import 'tailwindcss';

Thank you for your suggestion. However, I find the steps on the documentation website misleading—the two plugins,
"@nuxtjs/tailwindcss" and
"@tailwindcss/vite", should not be installed simultaneously. Additionally, the provided steps are overly complicated and may discourage users. Why not just use one of them, such as
"@nuxtjs/tailwindcss"? This plugin requires zero configuration and allows you to use Tailwind CSS directly after installation, as long as you're not using
"shadcn-vue".

[sadeghbarati]

Check v4 workspace code as an example for running shadcn-vue with Nuxt

https://github.com/unovue/shadcn-vue/tree/dev/apps/v4

---

@nuxtjs/tailwindcss is not ready for tailwindCSS v4 yet that why you need to use @tailwindcss/vite vite plugin in nuxt.config

nuxt-modules/tailwindcss#991

[viocha]

Check v4 workspace code as an example for running shadcn-vue with Nuxt

https://github.com/unovue/shadcn-vue/tree/dev/apps/v4

@nuxtjs/tailwindcss is not ready for tailwindCSS v4 yet that why you need to use @tailwindcss/vite vite plugin in nuxt.config

nuxt-modules/tailwindcss#991

Thank you, that's the problem, and it's been resolved.