Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Angular 19.1.3 Component HMR + TailwindCSS Problem - Not HMR but destructive refresh #29440

Open
1 task
HymanZHAN opened this issue Jan 22, 2025 · 1 comment · May be fixed by #29479
Open
1 task

Angular 19.1.3 Component HMR + TailwindCSS Problem - Not HMR but destructive refresh #29440

HymanZHAN opened this issue Jan 22, 2025 · 1 comment · May be fixed by #29479
Labels
angular/build:application area: @angular/build devkit/build-angular:dev-server freq1: low Only reported by a handful of users who observe it rarely severity2: inconvenient type: bug/fix

Comments

@HymanZHAN
Copy link

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

When developing with HMR enabled, changing a TailwindCSS class in the template would trigger a destructive reload, not HMR. Changing styles in component TS files or commenting out / adding template chunks seems to work fine.

HMR.+.TailwindCSS.Issue.-.1.mp4

Minimal Reproduction

A small (probably not minimal) reproduction: https://github.com/HymanZHAN/todo-mvc-angular

Exception or Error

Your Environment

> ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 19.1.3
Node: 22.11.0
Package Manager: pnpm 9.15.4
OS: linux x64

Angular: 19.1.2
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1901.3
@angular-devkit/build-angular   19.1.3
@angular-devkit/core            19.1.3
@angular-devkit/schematics      19.1.3
@angular/cli                    19.1.3
@schematics/angular             19.1.3
rxjs                            7.8.1
typescript                      5.6.3
zone.js                         0.15.0

Anything else relevant?

The todo app is zoneless.
@HymanZHAN HymanZHAN changed the title Angular 19.1.3 Component HMR + TailwindCSS Angular 19.1.3 Component HMR + TailwindCSS Problem - Not HMR but destructive refresh Jan 22, 2025
@clydin
Copy link
Member

clydin commented Jan 23, 2025

During a rebuild, Tailwind may internally change other aspects of the application even though a developer may have only made changes to a template. This typically occurs when new Tailwind classes are added to a template and currently requires a full page reload. More advanced Tailwind support is being investigated including built-in support for the recently released Tailwind v4.

@clydin clydin linked a pull request Jan 24, 2025 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
angular/build:application area: @angular/build devkit/build-angular:dev-server freq1: low Only reported by a handful of users who observe it rarely severity2: inconvenient type: bug/fix
Projects
None yet
Milestone
No milestone
3 participants
@alan-agius4 @clydin @HymanZHAN