HMR_TEMPLATES + Tailwind problem

[jmerro]

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

[spock123]

I think there is another case open with similar issue. We're seeing the same issue here btw.

[jmerro]

I made a PR to fix this oversight/bug with tailwind + hmr.
#29115