Pre-transform error: Can't resolve 'tailwindcss'

[gspgsp]

Environment

Working directory: /home/Documents/code/duoxiaozhan-www nuxi 11:41:57 PM
Nuxt project info: (copied to clipboard) nuxi 11:41:57 PM

---

• Operating System: Linux
• Node Version: v20.17.0
• Nuxt Version: 3.17.2
• CLI Version: 3.25.0
• Nitro Version: 2.11.11
• Package Manager: npm@10.8.2
• Builder: -
• User Config: modules, elementPlus, css, postcss, app, hooks, runtimeConfig, auth, tailwindcss
• Runtime Modules: @nuxtjs/tailwindcss@7.0.0-beta.0, @element-plus/nuxt@1.0.10, @sidebase/nuxt-auth@0.10.1, nuxt-typed-router@3.8.0
• Build Modules: -

---

👉 Report an issue: https://github.com/nuxt/nuxt/issues/new?template=bug-report.yml
👉 Suggest an improvement: https://github.com/nuxt/nuxt/discussions/new
👉 Read documentation: https://nuxt.com

Reproduction

No response

Describe the bug

after i run

npm install @nuxtjs/tailwindcss

it will install the latest version:

"@nuxtjs/tailwindcss": "^7.0.0-beta.0"

then run:

npm run dev

it will report:

 ERROR  Pre-transform error: Can't resolve 'tailwindcss' in '/home/Documents/code/duoxiaozhan-www'                                                                                                              11:41:45 PM
  Plugin: @tailwindcss/vite:generate:serve
  File: virtual:nuxt:%2Fhome%2FDocuments%2Fcode%2Fduoxiaozhan-www%2F.nuxt%2Ftailwind.css

i checked the .nuxt directory, and found there is a file named:

tailwind.css, and the content is the following:
**@import 'tailwindcss';
@import "/home/Documents/code/duoxiaozhan-www/.nuxt/tailwindcss/sources.css";**

Additional context

i don't know how to solve this problem, i think it has something to do with the the version, so i set the version to v6, like the following:

"@nuxtjs/tailwindcss": "^6.14.0"

and run npm install, then npm run dev, now it worked well

Logs

[jackytank]

I got same error as you, seems like the @nuxtjs/tailwindcss module didn't work well, I also followed exactly this guide
https://tailwindcss.com/docs/installation/framework-guides/nuxt
then tailwindcss v4.1 just worked even with npm run dev or npm run generate
but one think I observed is that @nuxtjs/color-mode didn't worked anymore and I have no idea how to make dark mode work in my blog project (https://github.com/jackytank/blog)

[jackytank]

I got same error as you, seems like the @nuxtjs/tailwindcss module didn't work well, I also followed exactly this guide https://tailwindcss.com/docs/installation/framework-guides/nuxt then tailwindcss v4.1 just worked even with npm run dev or npm run generate but one think I observed is that @nuxtjs/color-mode didn't worked anymore and I have no idea how to make dark mode work in my blog project (https://github.com/jackytank/blog)

Unrelated to OG issue but in my blog project I had made tailwindcss v4.1 dark mode worked by follow this guide: https://tailwindcss.com/docs/dark-mode

then in my assets/css/main.css I added the line @custom-variant dark (&:where(.dark, .dark *)); like this:

@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));

[RedStar071]

i think, you need install tailwindcss and tailwincss/vite

[eMeRiKa13]

Same error for me, and same solution by installing tailwindcss and tailwincss/vite. Thanks guys

[10r10y]

I had the same problem. After upgrading from @nuxtjs/tailwindcss v6.11.4 to v7.0.0-beta.0, custom Tailwind configuration is not being applied, and the Tailwind CSS viewer is inaccessible. I had to change the version to 6.14.0 to run normally.

[gspgsp]

Same error for me, and same solution by installing tailwindcss and tailwincss/vite. Thanks guys

i checked the doc(https://tailwindcss.com/docs/installation/using-vite), and found that @tailwincss/vite is another way to use tailwindcss, in fact i use postcss, i tried to use @tailwincss/vite, but the problem still exist, can you show the environment of your project?

[ineshbose]

Sorry for my late response - I'm aware of this issue and will be looking into solving this!

Temporary workaround is to just add tailwindcss as an explicit dependency along with @nuxtjs/tailwindcss!