HMR triggers full page load on component edit

[SimonMarx]

Environment

• Operating System: Darwin
• Node Version: v20.11.0
• Nuxt Version: 3.12.3
• CLI Version: 3.12.0
• Nitro Version: 2.9.7
• Package Manager: bun@1.1.18
• Builder: -
• User Config: compatibilityDate, devtools, modules
• Runtime Modules: @nuxtjs/tailwindcss@6.12.2-1720701009.60a4bba
• Build Modules: -

Reproduction

https://stackblitz.com/edit/github-xdbpil?file=pages%2Findex.vue

Describe the bug

As soon as i install the nuxt tailwindcss module, the HMR triggers a page reload.

With tailwind module

[nuxt] builder:watch: 0.48ms                                                                                                 
[nuxt] builder:watch: 0.521ms                                                                                                   
  vite:hmr [file change] components/not-used.vue +6s
ℹ page reload components/not-used.vue                                   

Having a plain nuxt application, without tailwind installed will not trigger a page reload.

Without tailwind module

[nuxt] builder:watch: 0.434ms                                                                                                    
[nuxt] builder:watch: 0.488ms                                                                                                    
  vite:hmr [file change] components/not-used.vue +11s
  vite:hmr [no modules matched] components/not-used.vue +0ms

However, if you change files/components which are part of the current page, even with the tailwindcss plugin there is no complete page-reload:

With tailwind module + component is used in current page

  vite:hmr [file change] components/not-used.vue +4s
[nuxt] builder:watch: 0.146ms                                                                                                  
[nuxt] builder:watch: 0.181ms                                                                                                   
  vite:hmr [vue:update(template)] {MY_ROOT_DIR}/components/not-used.vue +1m
ℹ hmr update /components/not-used.vue, /node_modules/tailwindcss/tailwind.css

The same behaviour counts for .ts files. Changes within them will trigger a whole page reload, which does not happen without the @nuxtjs/tailwindcss module.

With tailwind module

  vite:hmr [file change] utils/test.ts +9s
ℹ page reload utils/test.ts                                     

Without tailwind module

[nuxt] builder:watch: 1.331ms                                                                                                   
  vite:hmr [file change] utils/test.ts +4s
  vite:hmr [no modules matched] utils/test.ts +0ms        

Additional context

No response

Logs

No response

[ineshbose]

Hey, many thanks for reporting this! ❤️

I'm trying to understand this, thinking that a PostCSS cache invalidate may cause a page to reload, but I see your point that it isn't necessary. Just linking a related issue too - vitejs/vite#5808. Bottom line is that if the vanilla installation doesn't cause a page reload, then using the module shouldn't cause it either, so I agree this to be a bug.

[sadeqsheikhi]

i had a similar problem, where each HMR update took 10second or more.
it turned out it was due to a pattern in safelist option inside tailwind.config.ts file.
by removing the pattern HMR happens in normal time.

[mavyfaby]

Is there an update on this?