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.