Repository navigation
Tailwind CSS v4 classes in new or moved files are not picked up by ng serve until another rebuild #34446
Description
Command
build
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
In @angular/build 22.2.2 (and 22.2.3), src/tools/esbuild/stylesheets/stylesheet-plugin-factory.js handles PostCSS dir-dependency messages by expanding the glob with tinyglobby and adding the resulting files to watchFiles. Only files that exist at build time are watched. A file created later, or moved by renaming its folder, is never watched, so classes used only in it are not generated until something else triggers a stylesheet rebuild. esbuild has no directory/glob watch to fall back on, so the dir itself should probably be watched (or the glob re-expanded on add/unlink events).
Minimal Reproduction
- Angular 22 app with Tailwind v4 via @tailwindcss/postcss; run ng serve.
- Create src/app/foo/foo.ts using a class not used elsewhere, e.g. bg-[#123456]. It is generated.
- Rename the folder to src/app/bar/ and edit the file to use bg-[#654321]. The class is not generated.
- Touch src/styles.css. Now it is generated.
NG_BUILD_WATCH_ROOT=1 stops detecting changes entirely. Polling ("poll": 1000) doesn't help either.
Exception or Error
Classes in files added or moved under Tailwind's sources are generated on the next rebuild, as with modifications.
Your Environment
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI : 22.2.0
Angular : 22.2.0
Node.js : 24.15.0
Package Manager : bun 1.4.2
Operating System : linux x64
┌───────────────────────────┬───────────────────┬───────────────────┐
│ Package │ Installed Version │ Requested Version │
├───────────────────────────┼───────────────────┼───────────────────┤
│ @angular/aria │ 22.2.0 │ 22.2.0 │
│ @angular/build │ 22.2.0 │ 22.2.0 │
│ @angular/cdk │ 22.2.0 │ 22.2.0 │
│ @angular/cli │ 22.2.0 │ 22.2.0 │
│ @angular/common │ 22.2.0 │ 22.2.0 │
│ @angular/compiler │ 22.2.0 │ 22.2.0 │
│ @angular/compiler-cli │ 22.2.0 │ 22.2.0 │
│ @angular/core │ 22.2.0 │ 22.2.0 │
│ @angular/material │ 22.2.0 │ 22.2.0 │
│ @angular/platform-browser │ 22.2.0 │ 22.2.0 │
│ @angular/platform-server │ 22.2.0 │ 22.2.0 │
│ @angular/router │ 22.2.0 │ 22.2.0 │
│ @angular/ssr │ 22.2.0 │ 22.2.0 │
│ rxjs │ 7.8.2 │ ^7.8.2 │
│ typescript │ 6.0.2 │ 6.0.2 │
│ vitest │ 4.1.11 │ 4.1.11 │
Anything else relevant?
No response
Activity