HMR_TEMPLATES + Tailwind problem #29096
Description
Command
serve
Is this a regression?
- Yes, this behavior used to work in the previous version
The previous version in which this bug was not present was
No response
Description
While it seems from the CLI output that the styles.css is being generated (see below) upon making changes to tailwind classes, the dev server does not seem to announce these HMR stylesheet changes or even serve the new stylesheet even after the client refreshes their page manually. Only way to "re-sync" the styles is to make changes to the model.
Component update sent to client(s).
Initial chunk files | Names | Raw size
styles.css | styles | 6.50 kB |
main.js | main | 3.95 kB |
Application bundle generation complete. [0.248 seconds]
Component update sent to client(s).
The behaviour I would expect would be both component and style HMR are triggered or in the opposite order if that makes the changes smoothly apply.
Styles update sent to client(s).
Component update sent to client(s).
Minimal Reproduction
ng new project
follow install steps for https://tailwindcss.com/docs/guides/angular
NG_HMR_TEMPLATES=1 ng serve
add tailwind class(es) to an element, save
should see Component update sent to client(s)
Open app page Dev Tools | Elements, should see new tailwind class(es) applied to element.
Added Tailwind class(es) (unless another element was already using those classes) won't be in styles.css- so doesn't apply them.
Exception or Error
Your Environment
Angular CLI: 19.0.4
Node: 20.18.1
Package Manager: npm 10.8.2
OS: win32 x64
Angular: 19.0.3
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1900.4
@angular-devkit/build-angular 19.0.4
@angular-devkit/core 19.0.4
@angular-devkit/schematics 19.0.4
@angular/cli 19.0.4
@schematics/angular 19.0.4
rxjs 7.8.1
typescript 5.6.3
zone.js 0.15.0
Anything else relevant?
No response