Nuxt+JIT: HMR is effectively broken when style is regenerated

[makkarpov]

What version of Tailwind CSS are you using?

v2.2.2

What build tool (or framework if it abstracts the build tool) are you using?

Nuxt 2.15.7 + @nuxtjs/tailwindcss 4.2.0

What version of Node.js are you using?

v14.16.1

What browser are you using?

Chrome 90.0.4430.85

What operating system are you using?

Linux

Reproduction repository

https://github.com/makkarpov/tailwind-hmr-repro

Describe your issue

When JIT engine encounters new (i.e. "yet ungenerated") class, it has to generate it during rebuild, and then push regenerated CSS to the browser. Unfortunately when doing so it resets the state of the whole page. Moreover, it triggers full browser page refresh (instead of just re-instantiating the component).

Whole rich HMR experience is efficiently degraded to "automatic F5 presser".

Unfortunately disabling JIT is not a workaround, since it makes resulting CSS size (with most of colors enabled) to be 34 megabytes. DevTools are literally stuck when they encounter such a huge stylesheet.

[bradlc]

Hey @makkarpov. We have looked into this and tracked it down to an issue when using PostCSS 8 with Nuxt. You can see details and a reproduction of the issue here: nuxt/postcss8#18 – this issue is not Tailwind-specific and happens with any CSS file.

Unfortunately we won't be able to fix this within the tailwindcss package, but there is a workaround if HMR is important to you:

1. Don't use @nuxtjs/tailwindcss. Instead setup the Tailwind PostCSS 7 compatibility build manually and add it to your postcss config
2. Set the TAILWIND_MODE environment variable to watch in your dev script. This is required because Nuxt uses an old version of postcss-loader. You can read more about this here: https://tailwindcss.com/docs/just-in-time-mode#styles-don-t-update-when-saving-content-files

Here's a basic setup for reference: https://github.com/bradlc/jit-nuxt

Going to close this because it isn't an issue with Tailwind, but hopefully the above is helpful!