Vue-Nuxt Hot reloading JIT mode does not work via Nuxt Module comments

[productdevbook]

What version of Tailwind CSS are you using?

2.2.4

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

nuxt 2.15.6

What version of Node.js are you using?

node 14

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction repository

nuxt-modules/tailwindcss#357 (comment)

Describe your issue

Reproduction1: nuxt-modules/tailwindcss#357 (comment)

Reproduction2: nuxt-modules/tailwindcss#357 (comment)

I also live in my own project.

[productdevbook]

iam change scss to css and fixed my problem interested. scss very slow and dont hot reloading. via https://github.com/nuxt-community/tailwindcss-module

tailwindcss: {
    cssPath: '~/assets/styles/tailwind.css',
    viewer: false,
  },

[bradlc]

Hey @productfrontenddeveloper. We have looked into the hot reload problem 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 hot reloading 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!

[productdevbook]

Hey @productfrontenddeveloper. We have looked into the hot reload problem 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 hot reloading 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!

cc: @atinux

[medairbit]

Workaround to keep using @nuxtjs/tailwindcss without issue (nuxt-modules/tailwindcss#357 (comment))

[mod7ex]

there is a way but i don't know how to do it , we can register a listner on the reload (save) and we save the index.scss or any scss file this will force the browser to show changes