Tailwind JIT not updating styles when using styleUrls

リンクされた最小再現から開始します。yarn を実行し、続けて yarn start を実行してから、tailwind.css が styleUrls に別途記載されている状態で app.component.html を編集します。serve プロセスを再起動する前後で、生成された背景スタイルを確認します。以前は使用されていなかった Tailwind クラスを変更すると、再起動せずに提供中のスタイルが更新されれば完了です。

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 using styleUrls to specify the path to the tailwind css entrypoint file separately, the JIT will not detect changes properly.

To clarify:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss', '../tailwind.css'] // notice tailwind is separated here
})

Now if I try to use any class that is not already used in the HTML, the changes will not propagate properly. Only killing ng serve and restarting it will work.

I have attached a simple repro.

Minimal Reproduction

Repro at:

https://github.com/andreialecu/angular-tw-jit-repro

Run

yarn
yarn start

Open http://localhost:4200/ in the browser.

Then go into app.component.html and try to change bg-green-200 to bg-red-200, you will see that the background disappears because bg-red-200 does not exist.

If you ctrl+c then run yarn start again, the background will update.

Exception or Error

No response

Your Environment

Angular CLI: 13.3.10
Node: 16.14.2
Package Manager: yarn 1.22.19
OS: darwin arm64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1303.10
@angular-devkit/build-angular   13.3.10
@angular-devkit/core            13.3.10
@angular-devkit/schematics      13.3.10
@angular/cli                    13.3.10
@schematics/angular             13.3.10
rxjs                            7.5.7
typescript                      4.6.4

Anything else relevant?

Possibly related:

https://github.com/angular/angular-cli/issues/21749
https://stackoverflow.com/a/73446036