tailwindcss@3.4.3 build time significantly exceeds previous versions for monorepo

[neilthawani]

What version of Tailwind CSS are you using?

v3.4.3

What build tool (or framework if it abstracts the build tool) are you using?

We're using ember-source@^4.11.0 with related ember-cli-build and related build tools for an 11-subrepo monorepo. Here's our base subrepo package.json:

{
  "dependencies": {
    "@ember/jquery": "^2.0.0",
    "@exlinc/cr-zystudio-sdk": "file:../cr-zystudio-sdk",
    "@newrelic/publish-sourcemap": "^5.1.0",
    "@zip.js/zip.js": "git://github.com/gildas-lormeau/zip.js.git#3c346898dbcb9f344e8d5a99a65f8cf91b31f560",
    "ace-builds": "^1.5.0",
    "base64-arraybuffer": "^1.0.2",
    "basiclightbox": "^5.0.4",
    "blueimp-md5": "^2.19.0",
    "broccoli-filter": "^1.3.0",
    "broccoli-funnel": "^3.0.8",
    "broccoli-merge-trees": "^4.2.0",
    "core-object": "^3.1.5",
    "d3": "^3.5.17",
    "data-forge": "^1.10.1",
    "ember-auto-import": "^2.7.2",
    "ember-cli-babel": "^8.2.0",
    "ember-cli-deploy-plugin": "^0.2.9",
    "ember-cli-deprecation-workflow": "^2.2.0",
    "ember-cli-htmlbars": "^6.3.0",
    "ember-concurrency": "^4.0.0",
    "ember-cp-validations": "^6.0.0",
    "ember-fetch": "^8.1.2",
    "ember-inflector": "^4.0.2",
    "ember-in-viewport": "^4.1.0",
    "ember-flatpickr": "^7.1.0",
    "ember-lifeline": "^7.0.0",
    "ember-modifier": "^4.1.0",
    "ember-overridable-computed": "^1.0.0",
    "ember-test-selectors": "^6.0.0",
    "ember-websockets": "^10.2.1",
    "eventsource": "^2.0.2",
    "highlight.js": "^11.9.0",
    "iframe-resizer": "^4.3.9",
    "jq-console": "^2.13.2",
    "jquery-resizable": "^1.0.6",
    "long": "^5.2.3",
    "lz-string": "^1.5.0",
    "pako": "^2.1.0",
    "penpal": "6.2.2",
    "plotly.js-dist-min": "^2.31.1",
    "regenerator-runtime": "^0.14.1",
    "rsvp": "^4.8.5",
    "shlex": "^2.1.2",
    "tailwindcss": "^3.4.3",
    "tracked-built-ins": "^3.3.0",
    "underscore": "^1.13.6",
    "url-join": "^1.1.0",
    "vscode-diff": "^2.1.1",
    "xterm": "^5.3.0",
    "xterm-addon-fit": "^0.8.0",
    "xterm-addon-unicode11": "^0.6.0",
    "xterm-addon-web-links": "^0.9.0"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.23.10",
    "@babel/plugin-proposal-decorators": "^7.24.0",
    "@ember/optional-features": "^2.1.0",
    "@ember/render-modifiers": "^2.1.0",
    "@ember/string": "^3.1.1",
    "@ember/test-helpers": "^3.3.0",
    "@embroider/macros": "^1.16.0",
    "@glimmer/component": "^1.1.2",
    "@glimmer/tracking": "^1.1.2",
    "autoprefixer": "^10.4.19",
    "broccoli-asset-rev": "^3.0.0",
    "ember-ajax": "^5.0.0",
    "ember-cli": "^5.8.0",
    "ember-cli-code-coverage": "^3.0.0",
    "ember-cli-dependency-checker": "^3.3.2",
    "ember-cli-deploy": "^2.0.0",
    "ember-cli-deploy-build": "^3.0.0",
    "ember-cli-deploy-display-revisions": "^3.0.0",
    "ember-cli-deploy-gzip": "^3.0.0",
    "ember-cli-deploy-revision-data": "^3.0.0",
    "ember-cli-deploy-s3": "^4.0.1",
    "ember-cli-deploy-s3-index": "^3.0.0",
    "ember-cli-dotenv": "^4.0.0",
    "ember-cli-inject-live-reload": "^2.1.0",
    "ember-cli-postcss": "^8.2.0",
    "ember-cli-sass": "^11.0.1",
    "ember-cli-showdown": "^9.0.0",
    "ember-cli-sri": "^2.1.1",
    "ember-cli-string-helpers": "^6.1.0",
    "ember-cli-terser": "^4.0.2",
    "ember-click-outside": "^6.1.0",
    "ember-code-snippet": "^3.0.0",
    "ember-composable-helpers": "^5.0.0",
    "ember-drag-drop": "^0.9.0-beta.0",
    "ember-event-helpers": "^0.1.1",
    "ember-file-upload": "^9.0.0",
    "ember-froala-editor": "^4.2.0",
    "ember-fullscreen": "^1.0.5",
    "ember-get-config": "^2.1.1",
    "ember-load-initializers": "^2.1.2",
    "ember-math-helpers": "^4.0.0",
    "ember-moment": "^10.0.0",
    "ember-power-select": "^7.2.0",
    "ember-prism": "^0.13.0",
    "ember-promise-helpers": "^2.0.0",
    "ember-qunit": "^8.0.2",
    "ember-resolver": "^11.0.1",
    "ember-set-helper": "^3.0.1",
    "ember-simple-auth": "^4.2.2",
    "ember-source": "^4.11.0",
    "ember-template-lint": "^6.0.0",
    "ember-tooltips": "^3.6.0",
    "ember-truth-helpers": "^4.0.3",
    "ember-validators": "^4.1.2",
    "eslint": "^8.57.0",
    "eslint-plugin-ember": "^12.0.2",
    "eslint-plugin-qunit": "^8.1.1",
    "flatpickr": "^4.6.13",
    "js-file-download": "^0.4.12",
    "loader.js": "^4.7.0",
    "moment-timezone": "^0.5.45",
    "node-sass": "^9.0.0",
    "normalize.css": "^8.0.1",
    "pretender": "^3.4.7",
    "qunit": "^2.20.1",
    "stylelint": "^14.3.0",
    "stylelint-config-standard": "^24.0.0",
    "stylelint-config-standard-scss": "^3.0.0",
    "stylelint-order": "^5.0.0",
    "stylelint-scss": "^4.1.0",
    "webpack": "^5.91.0"
  },
  "peerDependencies": {
    "js-file-download": "^0.4.12",
    "moment-timezone": "^0.5.34"
  },
  "engines": {
    "node": ">=20.0.0",
    "npm": ">=10.2.4"
  },
  "ember": {
    "edition": "octane"
  },
  "ember-addon": {
    "configPath": "tests/dummy/config"
  }
}

What version of Node.js are you using?

v20.0.0

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

I think this issue may be reproducible if I share a trimmed-down version of our monorepos. Please hold.

Describe your issue

We previously didn't update this package for this single subrepo because it was taking a very long time to reload the app on localhost. With this update from 3.0.24 to 3.4.3,

Build successful (102503ms) – Serving on http://localhost:4200/

Slowest Nodes (totalTime >= 5%)                                                 | Total (avg)        
--------------------------------------------------------------------------------+--------------------
 (1)                                                                            | 38575ms            
ember-auto-import-webpack (1)                                                   | 21048ms            
Babel: zybooks-web (4)                                                          | 7274ms (1818 ms)   

Contrast this to commenting out @tailwind base, @tailwind components, and @tailwind utilities with tailwindcss@3.4.3:

Build successful (11419ms) – Serving on http://localhost:4200/

Slowest Nodes (totalTime >= 5%)                                                 | Total (avg)        
--------------------------------------------------------------------------------+--------------------
SassCompiler (1)                                                                | 2737ms             
AssetRewrite (2)                                                                | 2390ms (1195 ms)   
 (1)                                                                            | 2214ms             
ember-auto-import-webpack (1)                                                   | 1282ms          

And contrast to using tailwind@~3.0.24:

Build successful (57385ms) – Serving on http://localhost:4200/

Slowest Nodes (totalTime >= 5%)                                                 | Total (avg)        
--------------------------------------------------------------------------------+--------------------
ember-auto-import-webpack (1)                                                   | 19639ms            
Babel: zybooks-web (4)                                                          | 6476ms (1619 ms)   
 (1)                                                                            | 5567ms             
Babel: @ember/test-helpers (2)                                                  | 4545ms (2272 ms)   

I am unable to figure out why the build time just about doubles when updating this package version.

Our tailwind.config.js file looks like this:

module.exports = {
    content: [
        './{addon,app}/**/*.{hbs,html,js}',
        './node_modules/{content-tools,zycommon-internal-web,zycommon-web,zylabs}/addon/**/*.{hbs,html,js}',
    ],
    safelist: [
        {
            pattern: /^(.*?)/u,
        },
    ],
   theme: ...,
    plugins: [],
    corePlugins: {
        preflight: false,
    },
};

The contents of content sped up our build time by about 20 seconds.

[thecrypticace]

Hey! So this is likely due to the pattern you're using with safelist. That pattern says to include basically everything we can generate. When we add utilities, especially those that use colors, the number of possible classes can grow quite quickly. In your case this generates roughly 13MB of CSS with ~140k rules. No browser or bundler does a good job at handling CSS files this large which would be the reason you're seeing the slow down.

I'd suggest optimizing the safelist to generate fewer utilities (or, if possible, not using it at all).

[neilthawani]

Wow this significantly changed our build time!!!

Build successful (41947ms) – Serving on http://localhost:4200/

Slowest Nodes (totalTime >= 5%)                                                 | Total (avg)        
--------------------------------------------------------------------------------+--------------------
ember-auto-import-webpack (1)                                                   | 19461ms            
SassCompiler (1)                                                                | 3047ms             
AssetRewrite (2)                                                                | 2334ms (1167 ms)   

I will confer with my team and ask why this was set...

[neilthawani]

Ah it looks like some of our tailwind classes dynamically changed and disappeared without safelisting.

The dev who implemented this (it was me almost exactly two years ago) found this StackOverflow post recommending safelisting: https://stackoverflow.com/questions/71641943/tailwind-3-0-23-classes-not-being-applied-in-real-time-in-storybook/71656706#71656706

Then, without safelisting, our margin classes weren't displaying in some of our apps ...

But now, without safelisting, the UI looks as-expected, with margins applied and no unexpected visual changes.

I am not sure what has changed between then and now, but our build times are remarkably much faster now.