Performance problem with hot reaload in nuxt 2 and tailwind 3

[axelhzf]

I am working on a nuxt 2 application, and after migrating to tailwind 3, the times build times on dev mode have increased significantly. A single component change:

• tailwind 2 (jit mode) : ~2s
• tailwind 3 : ~10s

I follow the official instructions to install tailwind.

I tried to debug the problem and I am seeing that tailwind is processing many files. I suspect that is being called for the modified file AND for each component that contains an @apply

On the other hand, using tailwind 2, it is only being called for the modified file

[axelhzf]

I was reading https://tailwindcss.com/docs/functions-and-directives#using-apply-with-per-component-css and it says

That means if you have 10 components that each have a <style> block, Tailwind is being run 10 separate times, and each run has zero knowledge about the other runs. Because of this, when you try to @apply card in Card.svelte it fails, because Tailwind has no idea that the card class exists since Svelte processed Card.svelte and main.css in total isolation from each other.

Maybe this is the problem and tailwind a different tailwind instance is running for each component. In this case, the tracking content for these instances should be only the modified file and not every file defined on the tailwind config.

[axelhzf]

I created a repo with the minimal setup here https://github.com/axelhzf/nuxt-tailwind-performance

Running the project with the debug enabled (DEBUG=true yarn dev). This is what I see as soon as I make a change on the index page

Source path: /Users/axelhernandezferrera/dev/nuxt-tailwind-performance/components/ComponentWithApply.vue
Finding changed files: 1.361ms                                                     16:23:59
JIT TOTAL: 2.493ms                                                                 16:23:59
                                                                                   16:23:59

                                                                                   16:23:59

Source path: /Users/axelhernandezferrera/dev/nuxt-tailwind-performance/components/ComponentWithApply2.vue
Finding changed files: 0.768ms                                                     16:23:59
JIT TOTAL: 1.671ms                                                                 16:23:59
                                                                                   16:23:59

                                                                                   16:23:59

Source path: /Users/axelhernandezferrera/dev/nuxt-tailwind-performance/assets/css/main.css
Finding changed files: 0.784ms                                                     16:23:59
Reading changed files: 0.005ms                                                     16:23:59
Generate rules: 0.067ms                                                            16:23:59
Build stylesheet: 0.003ms                                                          16:23:59
Potential classes:  1                                                              16:23:59
Active contexts:  3                                                                16:23:59
JIT TOTAL: 4.115ms

[axelhzf]

Actually, the problem is already solved in #7524

[ztickm]

I'm still having this same problem on with Tailwind 3.2.1 and Nuxt 2, anyone else still has the problem or have an idea why?