Version

@nuxtjs/tailwindcss: v6.7.0
nuxt: v3.5.0

Reproduction Link

Without nuxt tailwind module (no HMR issues)

• https://github.com/TechAkayy/pg-nuxt-tailwindcss-nuxt-ui-tw-vanilla
• https://stackblitz.com/github/TechAkayy/pg-nuxt-tailwindcss-nuxt-ui-tw-vanilla

With nuxt tailwind module (HMR issues)

• https://github.com/TechAkayy/pg-nuxt-tailwindcss-nuxt-ui-tw-module
• https://stackblitz.com/github/TechAkayy/pg-nuxt-tailwindcss-nuxt-ui-tw-module

Steps to reproduce

I have exactly the same repo:
vanilla - the first one without nuxt tailwind module, following official tailwind docs for nuxt 3 (https://tailwindcss.com/docs/guides/nuxtjs#3)
module - the second one using our nuxt tailwind module

I maintain my color palette (primary, secondary etc) in an external file called tokens.cjs and they extend my theme (via a tw plugin).

Firstly, when updating the token.cjs file, HMR doesn't work with the module version that uses our nuxt tailwind module.

Secondly, when updating the tailwind config file, unlike the vanilla version, it doesn't apply the changes instantly, instead app restart taking few seconds to load and apply.

Here is a reproduction demo on youtube - https://www.youtube.com/watch?v=WY0UpPQRXYQ

1. Clone both repos, install deps and start dev-servers.

2. In tokens.cjs file, swap the primary palette with the commented one beneath it.

   • In vanilla version, the whole app instantly HMR applies the new primary color palette
   • In module version, the changes are not applied and it requires a manual restart of the dev-server to apply every atomic change

3. In tailwind config file, there is a custom plugin that adds a "rainbow" custom class (used in the "WELCOME TO" title in hero section at the top of my homepage). Change from-purple-500 to from-green-500.

   • In vanilla version, the gradient change is instantly applied
   • In module version, the gradient change gets applied, but the app re-start seems to take a few seconds

4. The tailwind config files in both apps are available as tailwind.config.alt.ts and can be swapped with the existing tailwind.config.cjs and the above issues are the same. So, probably not related to using tailwind config file in cjs format.

What is Expected?

The HMR updates should instantly apply.

What is actually happening?

My app pretty much does what's nicely covered in the new @nuxthq/ui library. It maintains color pairs in tailwind.css entry file, and swaps them for light/dark mode (material design inspired), and apply them to my BaseSheet & BaseButton components.

These HMR issues makes it hard for me (from a DX perspective) to adopt the new nuxt-ui library as it has a hard dependency on our nuxt tailwind module. Wondering if it's possible to use the new nuxt-ui library without nuxt tailwind module, as tailwind v3.3 introduced esm/ts config files.

Thanks for looking into this.