[6.13] Duplicate plugins being loaded from tailwind.config.ts

[reitowo]

Environment

• Operating System: Darwin
• Node Version: v20.18.1
• Nuxt Version: 3.15.4
• CLI Version: 3.21.1
• Nitro Version: 2.10.4
• Package Manager: [email protected]
• Builder: -
• User Config: app, modules, qrcode, nitro, components, extends, ssr, srcDir, postcss, css, primevue, ui, devtools, typescript, image, compatibilityDate
• Runtime Modules: @primevue/[email protected], @nuxt/[email protected], @nuxt/[email protected], @vueuse/[email protected], @nuxt/[email protected], @pinia/[email protected], pinia-plugin-persistedstate/[email protected], [email protected], @nuxtjs/[email protected]
• Build Modules: -

Reproduction

6.12.2 Works: https://stackblitz.com/edit/github-9r8kjuz1
6.13.1 Doesn't work: https://stackblitz.com/edit/github-9r8kjuz1-tuaijd5l

Describe the bug

I use tailwindcss-primeui, after upgrading to 6.13.1, the nuxt postcss warns ambigious name animate-duration-[450ms] and failed to process it.

Change the dep from 6.12.2 to 6.13.1 makes nuxt failed to process primevue tailwind utilities.

6.12.2 log:

ℹ Using default Tailwind CSS file                                                                nuxt:tailwindcss 17:25:24
  ➜ DevTools: press Shift + Alt + D in the browser (v1.7.0)                                                        17:25:30

ℹ Nuxt Icon server bundle mode is set to local                                                                    17:25:33
✔ Nuxt Icon discovered local-installed 1 collections: heroicons                                                   17:25:42
ℹ Tailwind Viewer: http://localhost:3000/_tailwind/                                                   nuxt:tailwindcss 17:25:43
ℹ Compiled plugins.server.mjs in 2439.54ms                                                                        nuxt 17:25:48
ℹ Compiled plugins.client.mjs in 2515.88ms                                                                        nuxt 17:25:48
ℹ Compiled types/plugins.d.ts in 2538.41ms                                                                        nuxt 17:25:48

 ERROR  [uncaughtException] t._onTimeout is not a function                                                              17:25:52

    at https://github9r8kjuz1-3ufs.w-credentialless-staticblitz.com/builtins.ddb8d84d.js:246:4692

ℹ Re-optimizing dependencies because vite config has changed                                                           17:25:53
✔ Vite client built in 3498ms                                                                                          17:25:54
✔ Vite server built in 8365ms                                                                                          17:26:02
✔ Nuxt Nitro server built in 16848 ms                                                                            nitro 17:26:21
ℹ Vite client warmed up in 4218ms                                                                                      17:26:26

6.13.1 log:

ℹ Using default Tailwind CSS file                                                                nuxt:tailwindcss 17:25:53
  ➜ DevTools: press Shift + Alt + D in the browser (v1.7.0)                                                        17:26:02


 WARN  Slow module @nuxt/devtools took 5285.74ms to setup.                                                         17:26:02

ℹ Nuxt Icon server bundle mode is set to local                                                                    17:26:05
ℹ Compiled plugins.server.mjs in 1288.14ms                                                                   nuxt 17:26:19
ℹ Compiled plugins.client.mjs in 1322.95ms                                                                   nuxt 17:26:19
ℹ Compiled types/plugins.d.ts in 1336.23ms                                                                   nuxt 17:26:19
ℹ Re-optimizing dependencies because lockfile has changed                                                         17:26:22
✔ Vite client built in 497ms                                                                                      17:26:22
✔ Vite server built in 11521ms                                                                                    17:26:34

 ERROR  [uncaughtException] t._onTimeout is not a function                                                         17:26:34

    at https://github9r8kjuz1tuaijd5l-wf3b.w-credentialless-staticblitz.com/builtins.ddb8d84d.js:246:4692


 WARN                                                                                                              17:26:59


 WARN  warn - The class animate-duration-[450ms] is ambiguous and matches multiple utilities.                      17:26:59


[17:26:59]  WARN  warn - If this is content and not a class, replace it with animate-duration-[450ms] to silence this warning.


[17:26:59]  ERROR  Pre-transform error: [postcss] /home/projects/github-9r8kjuz1-tuaijd5l/assets/primevue/common.css:28:5: The animate-duration-[450ms] class does not exist. If animate-duration-[450ms] is a custom class, make sure it is defined within a @layer directive.
  Plugin: vite:css
  File: /home/projects/github-9r8kjuz1-tuaijd5l/assets/primevue/common.css:28:4
  26 |  
  27 |  .p-toggleable-content-leave-active {
  28 |      @apply overflow-hidden transition-[max-height] animate-duration-[450ms] ease-[cubic-bezier(0,1,0,1)];
     |      ^
  29 |  }
  30 |  

✔ Nuxt Nitro server built in 20053 ms                                                                       nitro 17:27:01
ℹ Vite client warmed up in 3425ms                                                                                 17:27:04

[ineshbose]

Thanks for opening an issue. I have a very similar project to this, and I noticed minor issues in the project setup..

1. In assets/tailwind.css, you are importing ./primevue/tailwind after tailwindcss/utilities, but I think I would recommend to import all Tailwind utilities first; moreover, I also tend to use layers within my PrimeVue CSS files, eg. @import 'primevue/common' layer(components).
2. I haven't made use of tailwindcss-primeui plugin, but it seems to support CJS for now, and you're using that in tailwind.config.ts -- not a big issue, but you could stick to using tailwind.config.cjs maybe.
3. Most importantly where the issue lies is in nuxt.config. So you have Tailwind CSS imported in assets/tailwind.css while the module tends to look for assets/css/tailwind.css (mind the /css dir). You added ~/assets/tailwind to nuxt.options.css yourself, and that is fine, but it doesn't integrate with the module, so you had two conflicting installations of Tailwind. To fix this, either move tailwind.css into a css/ dir within the assets directory, and no need to add it in nuxt.config; or, within nuxt.config configure the module like so: tailwindcss: { cssPath: false } (for the module to not install another CSS file) or tailwindcss: { cssPath: '~/assets/tailwind.css' } (and remove from css[], for the module to install this into nuxt.options.css itself).

Let me know how that goes. 😄

[reitowo]

Sadly, it won't work.

Comparing to 6.12.2 this line is also missing:

ℹ Tailwind Viewer: http://localhost:3000/_tailwind/                                                   nuxt:tailwindcss 17:25:43

[ineshbose]

Sadly, it won't work.

I'll need to know what you did and what issue came up; the issue was fixed with the suggestions I provided on my end! Could you update the Stackblitz?

Comparing to 6.12.2 this line is also missing:

ℹ Tailwind Viewer: http://localhost:3000/_tailwind/                                                   nuxt:tailwindcss 17:25:43

This is intentional; you can access the viewer in devtools. The URL is only logged when devtools are disabled or in Nuxt 2.

[reitowo]

However in same configuration that line is outputed in 6.12.2, so I suspect, unless something changed between 6.12.2 and 6.13.1, tailwind may noy loaded properly.

I'll update that stackblitz later and post a new one here.

[reitowo]

Please take a look: https://stackblitz.com/edit/github-9r8kjuz1-n2rzo1ux

Same code but 6.12.2 still works: https://stackblitz.com/edit/github-9r8kjuz1-ny3t4uah

[reitowo]

Also notice that this error message is 6.13.1 only, when editing tailwind.config.ts and trigger a reload:

So, maybe something wrong with ts support between 6.12.2 - 6.13.1

[ineshbose]

Ah OK I found the issue..

It seems that your resolvedConfig loads two of the primeui plugins because of this:

https://github.com/nuxt/ui/blob/f2d387622ae6bc8781d7893b74595f4030f14a78/src/tailwind.ts#L82

I think I was aware of this code while working on 6.13, but didn't run into issues in my testing. I should provide a fix within this module in the next patch. Till then please stay on 6.12 🙏 sorry about this!

[reitowo]

No worries, thanks for debugging. Glad to find out what's wrong :)