Tailwind JIT not updating styles when using styleUrls

[andreialecu]

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

[andreialecu]

The use case is that we have a more extensive app with multiple lazy-loaded modules via routing.

We only use Tailwind in part of the app, and we don't want to include it in the main scss for the entire app.

[andreialecu]

This is possibly causing this issue: https://github.com/angular/angular-cli/issues/22237

In our case, it still occurs randomly in the latest Angular version and sometimes happens after adding a new and previously unused Tailwind class.

Our usual process was to:

1. Add a new class, and observe how it doesn't work properly
2. ctrl+c
3. yarn start
4. Sometimes crash during startup compilation with #22237 (I'd say 25%+ frequency)
5. rm -rf .angular/cache && yarn start

We may have some other factors making #22237 more frequent. We import tailwind.css from styleUrls in several separate components.

[alan-agius4]

I had a quick look at this and this appears to be caused because we are not invalidating the CSS from the file cache nor adding it as potential modified resources when a template is changed as typically a change in HTML does not effect CSS.

https://github.com/angular/angular-cli/blob/1000e8e0517cc83743e889bd239cb379d38ac3f6/packages/ngtools/webpack/src/resource_loader.ts#L55-L72

This would require some further analysis on the how to fix without impacting build performance during watch mode especially for non tailwind users.

[7Kronos]

@andreialecu @alan-agius4 Yes there is at least an issue related to cache. Angular: 16.2.4 (esbuild) Tailwind 3.3.3

I deleted the .angular cache, and it worked again.

[katieagne]

@andreialecu @alan-agius4 Yes there is at least an issue related to cache. Angular: 16.2.4 (esbuild) Tailwind 3.3.3

I deleted the .angular cache, and it worked again.

Wow this just saved me. I am learning Angular and couldn't figure out why the styles weren't working in the template. Deleting the cache worked for me, thank you!

[wmarques]

On my side I even added @tailwind in my styles.scss file but the classes are not added when I updated my HTML component...

It works on a fresh Angular 16 app tho (I'm still on Angular 16), so I'm not sure what's wrong with my app, the only difference I can see is that the project is much bigger. If you have any clue on what to look for for this kind of issue... It seems that updating my App.Component.html does not trigger the update of styles.scss where the tailwind annotations are. I thought it was related to the Angular cache at first but even with cache disabled it doesn't work.

Thanks

EDIT: got it working by updating the content from content: ['./src/**/*.{html,ts}'], to content: ['./src/app/**/*.{html,ts}'], I don't know why this made this works 😄 Maybe because the styles.scss is in src