Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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).

Issue Analytics

State:
Created 2 years ago
Comments:13 (1 by maintainers)

Top GitHub Comments

2reactions

adamwathancommented, Oct 3, 2021

Gonna try and look into this for you tomorrow ❤️

1reaction

thecrypticacecommented, Mar 3, 2022

I’ve opened https://github.com/laravel-mix/laravel-mix/issues/3225 to track this and will handle it over there.

Top Results From Across the Web

Laravel Mix Not Compiling Tailwind CSS - Stack Overflow

I am noticing that some Tailwind css classes are not loading when I run "sail npm run dev". For example, an element that...

Laravel Mix and Tailwindcss - Laracasts

Hello everyone, I am struggling with setting up Laravel-mix and using a component from TailwindUIKit. When I run npm run development the required...

An Annotated webpack 4 Config for Frontend Web…

I want to be able to use single file .vue components as a seamless part of my development process. Tailwind CSS — Tailwind...

Just-in-Time Mode - Tailwind CSS

Tailwind CSS v2.1 introduces a new just-in-time compiler for Tailwind CSS that generates your styles on-demand as you author your templates instead of ......

mini-css-extract-plugin - npm

This plugin extracts CSS into separate files. It creates a CSS file per JS file which contains CSS. It supports On-Demand-Loading of CSS...