tailwindcss: Hot reloading does not work for HTML templates

I managed to pinpoint the issue, for more details see: https://github.com/nuxt/postcss8/issues/24

Temporary Fix

You’re likely experiencing this issue if you’re:

• On Nuxt 2.15.4 or later;
• Using PostCSS 8 (if you’re using @nuxtjs/tailwindcss 4, your are).

Disabling icss compile type in your build options should fix the issue (but might introduce others if you’re relying on SASS, see: https://github.com/nuxt/nuxt.js/pull/9014):

// nuxt.config.js
export default {
	/* ... */

	build: {
		loaders: {
			css: {
				modules: false,
			},
		},
	}
}

Cheers!

Good day…

I have been playing around with it for a bit, and i noticed that it keeps working fine when there is no other css defined within <style></style>, once you add anything to it id,class,etc it stops the hot reload from working, removing it again needs a manual refresh to allow the hot reload to start working again, inline styles seem to work fine as well,

this also only seems to happen when the styles are defined within that component or page, as when defining a scoped style in layout/default.vue this does not effect the hot reload of let say the pages/index.vue

so a kind of bad workaround would be, to not define any styles within the style tags, and put everything inline…

i hope this gets fixed soon, as this kind of sucks… i would help my self but i would not know were to start…

kind regards.

Good day again…

I have been playing around some more and have a little update, that when there is something commented out withing the style tags, as in if there is any form of type inside the style tags, hot reload stops working,… i have been looking into hot-update.js but i cant make heads or tails of it… as it seems the updates are being pushed through. as the hot-update does show the modification,… its just seems to not updating the DOM accordingly…

also removing tailwind from build modules does not solve the problem, only removing postcss with removal of node_modules and package-lock.json, will fix the problem. so i suspect that postcss is interfering with webpack somehow. as even when tailwindcss in not active in nuxt.config.js hot reload still is not working…

UPDATE!.. WORKAROUND! edit package.json whith the following versions, "devDependencies": { "@nuxtjs/tailwindcss": "~3.4.3", "postcss": "~7.0.36" } rm -rf node_modules package-lock.json npm install

this fixed the problem for me… cheers!!!

Any progress on this bug…? Or maybe a workaround… ?

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

Any news on this. is it being worked on ?

Any updated on this with latest v5 version and Tailwind 3? I still have this issue, HMR is not working if previously not used Tailwind class is added to template, it reloads whole page:

[HMR] The following modules couldn't be hot updated: (Full reload needed)
This is usually because the modules which have changed (and their parents) do not know how to hot reload themselves.
[HMR]  - ./node_modules/@nuxt/postcss8/node_modules/css-loader/dist/cjs.js??ref--3-oneOf-1-1!./node_modules/@nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js??ref--3-oneOf-1-2!./assets/css/tailwind.css

A workaround that I’ve found to keep working with this module (and with any nuxt module that depends on @nuxt/postcss8), is to add this to your project package resolutions:

  "resolutions": {
    "autoprefixer": "^9",
    "css-loader": "^4.3.0",
    "postcss": "^7.0.32",
    "postcss-import": "^12.0.1",
    "postcss-import-resolver": "^2.0.0",
    "postcss-loader": "^3.0.0",
    "postcss-nesting": "^7.0.1",
    "postcss-url": "^8.0.0",
    "postcss-custom-properties": "^10.0.0",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat"
  }

Is there any solution that does not involve downgrading to PostCSS v7?

this fixed the problem for me… cheers!!!

downgrading as specified fixed issue for me also

The workaround works but it downgrades Tailwind to v1.9.x which disables other handy features of Tailwind 2.x like arbitrary values. So it would be great if we could find a better solution which works with the latest included Tailwind version 2.x.

An alternative workaround is to downgrade to v4.1: "@nuxtjs/tailwindcss": "~4.1.0", This will use Tailwind 2.x and hot-reloading will work. But on that version, there’s another bug where it does the HMR twice, see #369

commenting the ./nuxt.config.{js,ts}', line seemed to fix it 😃 https://github.com/nuxt-community/tailwindcss-module/issues/406#issuecomment-998760314

Here’s an easy way to reproduce the issue:

1. Run npx create-nuxt-app and generate a new Nuxt project
2. Run npx tailwindcss init to create a Tailwind config file
3. Edit tailwind.config.js and add mode: 'JIT', to enable the JIT compiler
4. Start the dev server using npm run dev
5. Open Chrome and open the Dev Tools
6. Enable Preserve log in the Dev Tools’ console
7. Edit /components/Tutorial.vue and add an arbitrary value to an element, e.g. bg-[#ee3456]
8. The error (as previously posted) is shown: [HMR] The following modules couldn't be hot updated: (Full reload needed)

Expected: To see the changes without page reload, using HMR.

The issue appears to be related to how Tailwind JIT “caches” the previously used classes. Continuing from the previous steps:

1. Change arbitrary value from bg-[#ee3456] to something else, e.g. bg-[#ee3457]
2. HMR breaks and full reload happens
3. Now change the value back to a value which you have used before, e.g. bg-[#ee3456]
4. HMR works fine

The moment you add a class, whether built-in or arbitrary, which Tailwind (or the CSS loader?) has never seen before, it will cause HMR to break. Once the class has been cached somehow, HMR will work okay.

Is there any solution that does not involve downgrading to PostCSS v7?

In the above message, it contains all the instructions and even has an example installation.

indeed that is the case … its deff not ideal but it the only combination i found that works… regards.

I’m having the same issue