Laravel Mix HMR CSS and Tailwind class generation breaks when compiling 2 JS files

[sebastiaanluca]

What version of Tailwind CSS are you using?

2.2.15

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

Laravel Mix 6.0.6

What version of Node.js are you using?

v14.17.0

What browser are you using?

Firefox Developer Edition, Chrome, …

What operating system are you using?

macOS Big Sur

Reproduction repository

https://github.com/sebastiaanluca/tailwind-hmr-bug

Describe your issue

In a fresh Laravel application served with Valet, Tailwind JIT mode doesn't create classes or update app.css for classes used in Vue components when using hot reload (mix watch --hot or TAILWIND_MODE=watch mix watch --hot) in combination with compiling 2 JS files (as far as I was able to reproduce). The watcher runs fine and it builds the files, but it won't create and inject the CSS.

It works fine in Blade views because BrowserSync refreshes the page for you, but not in Vue components where the CSS is injected when using hot reload. It'll also create them when running npm run watch, npm run dev, or npm run production.

It took a while to find the issues, but I've successfully reproduced the bug in a fresh Laravel app: https://github.com/sebastiaanluca/tailwind-hmr-bug

I had this issue in my main app and thought the cause was BrowserSync or some odd configuration, but I followed the installation instructions from scratch (https://tailwindcss.com/docs/guides/laravel) and updated it to use JIT mode (https://tailwindcss.com/docs/just-in-time-mode).

Similar issue to #4978, #5135, and #4833.

[gcavanunez]

Hi, not sure if it may be a limitation/error on the tailwindcss side nor if this would be of aid in any way but have you tried changing the configuration of the css file that's importing tailwindcss to be as such.

  .postCss("resources/css/app.css", "public/css", [
    require("postcss-import"),
    require("tailwindcss"),
    require("autoprefixer"),
  ]) 

Also does the issue continue if not using the tailwindcss css import file?

[sebastiaanluca]

@gcavanunez No change with the sorted require statements nor with the way Tailwind is imported (i.e. using @tailwind base instead of @import 'tailwindcss/base'). As long as there are 2 .js builds, HMR doesn't generate newly used classes.

[sebastiaanluca]

I set up my project using Vite now and am encountering the same issue. Newly used styles are not generated, only previously used ones. I have to restart the dev/build process for them to be generated. Maybe related to vitejs/vite#4150.

I now have the most basic Vite + Tailwind setup following the installation guide (https://tailwindcss.com/docs/guides/vue-3-vite). I enabled JIT mode and configured purge to a single blade file, just to be sure (https://tailwindcss.com/docs/just-in-time-mode). I also tried enabling TAILWIND_MODE=watch, but only Vite is registering changes (and reloads the page), Tailwind isn't.

Not sure where to go from here.

---

Edit - Vite also doesn't seem to be picking up tailwind.config.js changes, although there's support for it. Could this be a larger OS issue of not detecting file changes?

---

Edit 2

I repaired my disk and did some extra steps according to https://stackoverflow.com/questions/26708205/webpack-watch-isnt-compiling-changed-files. It seems to detect changes, but doesn't update the stylesheets.

 vite:hmr [file change] tailwind.config.js +14s
  vite:hmr [file change] .idea/workspace.xml +3ms
  vite:hmr [no modules matched] tailwind.config.js +1ms
  vite:hmr [no modules matched] .idea/workspace.xml +1ms
  vite:hmr [file change] tailwind.config.js +2m
  vite:hmr [no modules matched] tailwind.config.js +1ms
  vite:hmr [file change] tailwind.config.js +3s
  vite:hmr [no modules matched] tailwind.config.js +0ms

[adamwathan]

Gonna try and look into this for you tomorrow ❤️

[sebastiaanluca]

Thanks, man! Whenever you have time. If you need anything from me, let me know.

Currently trying out some combinations and figuring out why this doesn't work with Vite either. Not making much progress.

1. Vite + JIT off = HMR works fine, styles are updated, editing tailwind.config.js detects the change but doesn't update anything
2. Vite + JIT on = HMR works fine, styles are not generated (but they are added to the Blade/Vue views), editing tailwind.config.js detects the change but doesn't update anything

Same with Webpack.

I have tried:

• Clearing npm cache
• Removing and reinstalling node_modules
• Quitting any file sync app that might interfere with fsevents
• Fixing my drives and permissions
• Renaming and moving the project
• Setting up a totally unrelated reproduction project
• Using 1 JS input file
• Following the installation guide
• Using the most basic setup
• And so on, you get the gist 😄

So on the one hand you've got HMR that works, but doesn't generate styles when JIT mode is enabled. On the other, changing the Tailwind configuration file doesn't trigger any changes. Maybe we need to focus on one here. Don't really care I can't edit the config on-the-fly when JIT mode works.

[gcavanunez]

@sebastiaanluca any chance you could put together a minimal reproduction repo showing the vite setup you got going?

[sebastiaanluca]

I'll try to do so asap, but currently short on time. I've reverted my active setup to not use JIT, but not having that nor HMR when editing the Tailwind config is a bit annoying.

---

Edit

node_modules/.bin/tailwindcss --watch -o public/derp.css

Seems to work fine. JIT mode enabled and generates all classes. It's not include in the Vite build of course, so no HMR and not really sure how to connect the 2 with versioning, HMR, etc enabled.

---

Edit

It's not picking up the input file though

node_modules/.bin/tailwindcss --input=resources/css/global.css --output=public/derp.css

Just outputs the generated Tailwind CSS based on tailwind.config.js in the root.

---

Edit

Another update, just to keep you all informed 😄

For Vite, downgrading to 2.4.2 seems to resolve the issue. Suggested in #4978 (comment). V2.6.3 that contains the fix doesn't resolve it. See vitejs/vite#4592. Not an ideal fix, because it introduces possible other issues.

For Webpack, only building 1 JS resolves the issue, but that's not a really good fix either of course.

I'm not sure if it's a Tailwind or Vite or Webpack issue tbh.

Definitely related to #4978 btw.

[sebastiaanluca]

Using the latest versions of Tailwind, vite, and related packages seem to have resolved the HMR issue ¯_(ツ)_/¯

[sebastiaanluca]

We've set up a new project with Webpack and multiple devs in our team have the issue where Tailwind doesn't generate new classes that aren't already in public/app.css or memory.

I have noticed there are 2 (related?) issues at play here:

HMR does not reload the view, only a manual reload uses the new classes. I believed this was due to having 2 mix.js() calls in webpack.mix.js. Reproducible in https://github.com/sebastiaanluca/tailwind-hmr-bug.

HMR reloads, but Tailwind CSS JIT did not generate the new classes (like as if it didn't scan the files or did not find the new classes). Using already generated classes works fine. Reproducible in https://github.com/sebastiaanluca/tailwind-hmr-bug-2.

These only started happening with Tailwind JIT (alpha), regardless if using Webpack or Vite. I haven't been able to pinpoint the exact issue, as it works in some projects, but not in others. Previously didn't work for my own site, but a Vite upgrade then fixed it. I'm assuming it's something in the JS or CSS setup, app.js or app.css.

So yeah 😅 Hope someone can find some time to look into it, can't be the only one having this?

[thecrypticace]

This is definitely a Laravel Mix bug. It's not reloading the CSS at all if compiling multiple JS files. Can get it to break even when not using Tailwind CSS but just editing CSS files.

[thecrypticace]

I've opened laravel-mix/laravel-mix#3225 to track this and will handle it over there.

[sebastiaanluca]

I did have it with Vite too, not using Laravel Mix or Webpack at all, so that's why I believed it was a Tailwind bug. But hopefully someone will pick it up over there. Although with ~160 open issues, there's little progress and I don't think it'll get sorted soon 😬 Thanks for checking and opening the issue there!

[plumduffer]

This is also happening with me on the latest Laravel Mix and Tailwindcss.