Tailwind 2x slower builds starting from v3.3.4

[gligorot]

What version of Tailwind CSS are you using?
Tested:
v3.3.2 , v3.3.3 - fine
v3.3.4, v3.3.5, v3.3.6, v3.3.7, v3.4.1, v3.4.3 - slow build

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

Used alongside Nx 15.8.5 (monorepo management), Postcss 8.4.35, prettier-plugin-tailwindcss 0.1.13

What version of Node.js are you using?

    "node": "20.11.0",
    "yarn": "1.22.18"

What operating system are you using?

Mac M1 Pro, running Sonoma 14.2.1

Issue:

Recently we upgraded Tailwind from v3.3.2 to v3.4.1 and noticed 2x slower build times.

We're using tailwind in an Nx monorepo and building the output css via the build CLI command:

$ npx tailwindcss build -i input.css -o output.css --minify --postcss                                                                                                                                                                    

I tested various TW versions and found out that:
When running the command on tailwind versions until v3.3.3 it builds the CSS in around 2 minutes.
When running the command on tailwind versions v3.3.4, v3.3.5, v3.3.6, v3.3.7, v3.4.1, v3.4.3 the build takes x2 - around 4 minutes.

I also tried to build without the --minify and --postcss flags with no obvious change in build times.

Release v3.3.4 doesn't have any listed changes for the CLI build command, yet something slows it down considerably:
https://github.com/tailwindlabs/tailwindcss/releases/tag/v3.3.4

This topic deserves an issue opened, but I don't have the time at the moment to make a reproducible case so for now I only opened a discussion thread.

[adamwathan]

Wow two minutes is already an insane amount of time — is your content configuration scanning way more files than necessary? How big is the final CSS file? I’ve never seen more than 1s for a production build in our own projects like tailwindcss.com so I think there’s a bigger problem here somewhere.

[gligorot]

Hi @adamwathan,

I checked the content config and found out that we naively scan a node_modules of a project inside the monorepo, which lead to the long build times. Now the CSS files build in a second, as promised 😄.

Thanks for the quick response and the solution,
Gligor

[gligorot]

Just for reference, the problematic line was (Nx/monorepo context, hence the joins)

content: [
    join(__dirname, '../../../next-project/**/*.{jsx,html,js}'),

And the solution was to exclude irrelevant paths:

content: [
    join(__dirname, '../../../next-project/**/*.{jsx,html,js}'),
    
    // ! prefix excludes in fast-glob
    `!${join(__dirname, '../../../next-project/.next/**')}`, 
    `!${join(__dirname, '../../../next-project/node_modules/**')}`,

Build time down from 240s to 1s.