ng serve: compile time 10x slower with tailwind 2.2.x

[gianmd]

🐞 Bug report

Command (mark with an x)

• serve

Is this a regression?

Problematic Angular-cli version: ^11.2.10

Previous TailwindCSS version with no problem: TailwindCSS@2.1.2

Problematic Version: TailwindCSS@2.2.4

Description

Since Angular-cli v11.2 started supporting TailwindCSS natively, we decided to upgrade our codebase to use TailwindCSS instead of custom css on the most part of our app.

We use tailwindCSS with JIT mode enabled, and we haven't had any problems until now.

Recently TailwindCSS upgraded to version 2.2.4 and bringing more features, and a New dependency tracking system for Just-in-Time mode. The latest tracking system dependency is compatible with webpack 4 and webpack 5 (using the latest postcss-loader@^4 and postcss-loader@^5), So we decided to upgrade to this version and now we are experiencing x10 compilation times.

Our application is quite large and typically experience ~5 incremental compile times with ng serve. With the new version of tailwindcss@2.2.4 this compiling times are now ~65seconds on each save.

🔬 Minimal Reproduction

Since our app is large, it is hard to replicate the problem on a new repo. I'm attaching the CPU Profiles comparing the 2 tailwindCSS versions.

CPU Profiles ZIP

CPU profile screenshots

Our test goes like this

1. Run ng serve ( node --max_old-space-size=12000 ./node_modules/@angular/cli/bin/ng serve )
2. Add a tailwind class to any div element (class="bg-red-500")
3. Save file

🌍 Your Environment

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

Angular CLI: 11.2.10
Node: 14.16.1
OS: darwin x64

Angular: 11.2.11
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.1102.10
@angular-devkit/build-angular      0.1102.10
@angular-devkit/core               11.2.10
@angular-devkit/schematics         11.2.10
@angular/cdk                       11.2.10
@angular/cli                       11.2.10
@angular/fire                      6.1.4
@angular/google-maps               11.2.10
@angular/material                  11.2.10
@angular/material-moment-adapter   11.2.10
@schematics/angular                11.0.1
@schematics/update                 0.1102.10
ng-packagr                         11.0.2
rxjs                               6.6.7
typescript                         4.0.5
webpack                            4.44.2

Anything else relevant?

TailwindCSS 2.2.0 Changelog on JIT mode

[alan-agius4]

The first thing I noticed is that there are a large number of Sass compilations which take around 16.4s.

From some debugging I noticed that tailwind is adding a virtual directory

/var/folders/mp/zsgl3srd389_js72bk4_bkgh0000gn/T/tmp-40075-H4BHLbbaPPgx

This has a dependency on all the component stylesheets.

/Users/alanagius/cli-reproductions/tailwinds/src/app/app.component.scss
/Users/alanagius/cli-reproductions/tailwinds/src/app/foo/foo.component.scss
/Users/alanagius/cli-reproductions/tailwinds/src/app/foo/zar/zar.component.scss
/Users/alanagius/cli-reproductions/tailwinds/src/app/foo/bar/bar.component.scss

This directory is being invalidated with on every change which cause all components to be invalidated and recompiled.

[gianmd]

@alan-agius4 Let me know if you need something else from me

[karptonite]

Just ran into this problem myself. So in case you were wondering, it isn't just you. I'll be reverting to the older tailwindcss for now, I think.

[alan-agius4]

@karptonite, are you using Angular CLI 11 as well? If so, can you please update to the latest version and try again?

I tried to replicate this issue using the latest version of tailwindcss, webpack and Angular CLI and I am unable.

Thanks for reporting this issue. Luckily, it has already been fixed in one of the recent releases. Please update to the most recent version to resolve the problem.

[karptonite]

I am on Angular CLI 11. If this is fixed in 12, that is great, and I can give it a try once our other dependencies are updated for Angular 12. Do you happen to know if it was fixed in the CLI 11 branch later than 11.2.10?

[alan-agius4]

I am on Angular CLI 11. If this is fixed in 12, that is great, and I can give it a try once our other dependencies are updated for Angular 12. Do you happen to know if it was fixed in the CLI 11 branch later than 11.2.10?

If this is indeed fix, my assumption would be that it was fixed as part of the Webpack 5 implementation. Hence, I doubt that it was fixed in 11.2.x.

It would be great if someone can confirm that the issue is no longer present in version 12.

[gianmd]

Just tested our app with angular/cli@v12.1.0 and tailwindcss@2.2.4 vs tailwindcss@2.1.2 and the issue still present.

Times on Angular v12 are faster than v11 but still considerably longer with the lower version of tailwindcss. ~3seconds vs ~30seconds between each save.

Here the cpu profiles recorded of the 2 tailwind versions with Angular 12.1.0

Angular v12.1.0 - TailwindCSS v.2.1.2

Angular v12.1.0 - TailwindCSS v.2.2.4

Recorded CPU profiles
Angular12-Tailwind- CPU Profiles.zip

Hope this helps @alan-agius4