Vite + Tailwind JIT -> broken HMR

[jods4]

Describe the bug

When I add Tailwind (JIT mode) to my PostCSS config, HMR doesn't kick-in for Vue templates anymore.

Reproduction

Without tailwindcss in my .postcssrc.json:

Notice the hmr update home.vue appearing in terminal (and it works in browser).

Now let's add Tailwind to .postcssrc.json:

{
  "plugins": {
    "tailwindcss": {}
  }
}

Note that I'm using JIT mode, in tailwind.config.js:

module.exports = {
  mode: "jit",
  purge: ["./{Components,Modules}/**/*.vue", "./app.vue"],
}

Restart, it works. Let's try hmr again:

As you can see, only index.css was HMR.
This is semi-expected as Tailwind JIT watches template changes and dynamically create required styles (although I did not create any new style in this edit -- but it could be the case).
The home.vue template HMR is nowhere to be seen, though; it didn't update in browser, of course.

System Info

System:
    OS: Windows 10 10.0.18363
    CPU: (12) x64 Intel(R) Core(TM) i7-9850H CPU @ 2.60GHz
    Memory: 6.30 GB / 15.79 GB
  Binaries:
    Node: 15.5.1 - C:\Program Files\nodejs\node.EXE
    npm: 7.3.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.18362.1593.0)
    Internet Explorer: 11.0.18362.1
  npmPackages:
    @vitejs/plugin-vue: ^1.2.4 => 1.2.4 
    vite: ^2.4.0 => 2.4.0 

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

[patak-dev]

Hey @jods4, we just merged #4127 and it will be part of 2.4.1 (to be released soon). Would you try if this issue is not present against main? Thanks!

[jods4]

Yes, I can gladly test it!
What's the best way to grab it?

[patak-dev]

What's the best way to grab it?

https://vitejs.dev/guide/#using-unreleased-commits

[patak-dev]

@jods4 vite@2.4.1 has been released, so you can directly test this by updating to it

[jods4]

ah thanks, fitting.
I was trying with a local build but had problems (__DEFINES__ is not defined in vite client)

[jods4]

@patak-js not quite fixed.
In 2.4.1 modifying templates triggers a full page reload, not hmr.

[patak-dev]

@OneNail would you take a look at this one?

[y1d7ng]

@OneNail would you take a look at this one?

I can't reproduce this, hmr works fine when I use tailwind and vue together, @jods4 can you provide a small repro, thanks

[jods4]

😣
Ok I just tried to put up a minimal repro but it seems to work for me as well...
There must be something more in my project, but it's a large project... oh well let me try to isolate what triggers the issue.

[patak-dev]

@jods4 I'll close this one, please open a new issue with the reproduction. Thanks!

[jods4]

See #4150. I was lucky, the 1st thing I tried to bring in triggered the issue.