TailwindCSS still extremely slow, and JIT not updating changes

[spock123]

🐞 Bug report

Hi, I know this has been reported before, but those issues were closed due to inactivity. But the issue still persists:

Description

Adding Tailwind to Angular makes development builds extremely slow. Our project went from < 1 sec to >15 secs on each change.

Tried lots of things ,but nothing has worked so far. I unfortunately cannot share our project.

🌍 Your Environment

Angular CLI: 13.0.3
Node: 14.17.0
Package Manager: npm 7.22.0
OS: darwin x64

Angular: 13.0.2
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, localize, material
... material-moment-adapter, platform-browser
... platform-browser-dynamic, platform-server, router
... service-worker

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1202.13
@angular-devkit/build-angular   13.0.3
@angular-devkit/core            10.2.3
@angular-devkit/schematics      13.0.3
@angular/cli                    13.0.3
@angular/fire                   6.1.5
@nguniversal/builders           13.0.1
@nguniversal/express-engine     13.0.1
@schematics/angular             13.0.3
rxjs                            7.4.0
typescript                      4.4.4

Anything else relevant?

Tailwind config:

module.exports = {
    mode: 'jit',
    important: true,
    prefix: '',
    purge: {

        content: ['./src/**/*.{html,ts}'],

        mode: 'layers', // or 'all' ☠️ be careful
        preserveHtmlElements: true,
        layers: ['base', 'components', 'utilities'], // remove layers to ignore from purging
        options: {
            /* PurgeCSS options */
        }
    },
    darkMode: 'class',
    theme: {
        extend: {
            fontFamily: {
                body: ['Open Sans']
            },
            colors: {
                primary: {
                    50: '#EFF6FF',
                    100: '#DBEAFE',
                    200: '#BFDBFE',
                    300: '#93C5FD',
                    400: '#60A5FA',
                    500: '#3B82F6',
                    600: '#2563EB',
                    700: '#1D4ED8',
                    800: '#1E40AF',
                    900: '#1E3A8A'
                },
                accent: {
                    50: '#ECFDF5',
                    100: '#D1FAE5',
                    200: '#A7F3D0',
                    300: '#6EE7B7',
                    400: '#34D399',
                    500: '#10B981',
                    600: '#059669',
                    700: '#047857',
                    800: '#065F46',
                    900: '#064E3B'
                },
                warn: {
                    light: '#F44336',
                    dark: '#D32F2F'
                }
            }

        }
    },

    plugins: [
        require('@tailwindcss/typography')   
     ]
};

Dependencies:

 "dependencies": {
    "@angular/animations": "~13.0.2",
    "@angular/cdk": "^13.0.2",
    "@angular/common": "~13.0.2",
    "@angular/compiler": "~13.0.2",
    "@angular/core": "~13.0.2",
    "@angular/fire": "^6.1.5",
    "@angular/forms": "~13.0.2",
    "@angular/localize": "^13.0.2",
    "@angular/material": "^13.0.2",
    "@angular/material-moment-adapter": "^13.0.2",
    "@angular/platform-browser": "~13.0.2",
    "@angular/platform-browser-dynamic": "~13.0.2",
    "@angular/platform-server": "~13.0.2",
    "@angular/router": "~13.0.2",
    "@angular/service-worker": "^13.0.2",
    "@ngneat/content-loader": "^6.0.0",
    "@ngneat/reactive-forms": "^1.3.1",
    "@ngrx/effects": "^13.0.1",
    "@ngrx/router-store": "^13.0.1",
    "@ngrx/store": "^13.0.1",
    "@ngrx/store-devtools": "^13.0.1",
    "@nguniversal/express-engine": "^13.0.1",
    "@sentry/angular": "^6.10.0",
    "@sentry/tracing": "^6.10.0",
    "angular-notifier": "^9.0.1",
    "bootstrap-4-grid": "^3.4.0",
    "express": "^4.17.1",
    "file-saver": "^2.0.5",
    "firebase": "^8.1.1",
    "hammerjs": "^2.0.8",
    "intersection-observer": "^0.11.0",
    "memory-cache": "^0.2.0",
    "moment": "^2.29.1",
    "nemid": "^1.0.4",
    "ng-dialog-animation": "^9.0.3",
    "ng-gallery": "^5.0.0",
    "ng-in-viewport": "^6.1.5",
    "ng-recaptcha": "^6.1.0",
    "ngrx-store-localstorage": "^12.0.0",
    "ngx-animations": "^4.0.0-beta.1",
    "ngx-gallery": "^5.10.0",
    "ngx-quicklink": "^0.2.7",
    "path": "^0.12.7",
    "qs": "^6.10.1",
    "rxjs": "~7.4.0",
    "tslib": "^2.0.0",
    "ws": "^7.4.5",
    "xhr2": "^0.2.1",
    "zone.js": "~0.11.4"
  },

[alan-agius4]

I suspect the culprit is the purge option which should only be enabled for production builds.

Can you try to disable that and see if the problem persists? If the problem persists, we’d need a reproduction to investigate the issue.

[spock123]

Hi @alan-agius4 , thank you for your quick response.

As far as I understand, TailWind will only purge when NODE_ENV = production, which is not the case in dev mode.

I've also tried to deactivate purge altogether, but it doesn't seem to affect the issue.

[alan-agius4]

In that case a reproduction would be needed to determine what is the problem and if it's caused by the Angular CLI or TailwindCSS.

A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

This might be related to your directory structure so its really important to get an accurate repro to diagnose this.

[spock123]

Thank you @alan-agius4 , I'll try to work on it and see what I can come up with. Thanks again.

[spock123]

A few observations so far:

• issue still persists with purge disabled
• issue still persists with Tailwind JIT mode disabled

[alan-agius4]

Can you provide a CPU profile of the build please?

[spock123]

@alan-agius4 I'm out now but I'll try later. Sorry :) thank you

[spock123]

@alan-agius4 I think my mystery is solved. For some reason, in Angular.json, I had

"optimization": true,
"buildOptimizer": true

Turning those off helped immensely

[alan-agius4]

Glad that you found the issue 😀

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}