"@tailwindcss/vite": "4.0.8" and "@tailwindcss/vite": "4.0.9" have massively increased load times for the CSS in Vite.

[terryupton]

So I have noticed drastically increased load times when using Vite and Tailwind when updating to "@tailwindcss/vite": "4.0.8" and "@tailwindcss/vite": "4.0.9".

"@tailwindcss/vite": "4.0.8" and "@tailwindcss/vite": "4.0.9"

"@tailwindcss/vite": "4.0.7" and lower.

Not sure what is causing this.
Happy to share more information about my setup or debug further with instructions.

Thanks

[philipp-spiess]

Hey! Can you post a repro?

One thing I can think of is that yhe automatic content detection, which no longer works off only the Vite module graph, now scans through a bunch of unwanted files. Does your codebase have a .gitignore file?

[terryupton]

Hey @philipp-spiess

Not sure what you want when you say Can you post a repro? ?
Happy to try and provide what I can...

I am working on a Craft CMS project. Here are some (useful?) extracts...

index.css

@import "tailwindcss";
@import "./partials/brand.css";
@import "./partials/animation.css";
@import "./partials/grid.css";
@import "./partials/prose.css";

@plugin '@tailwindcss/forms';
@source "../../templates";

gitginore

# CRAFT ENVIRONMENT
.env*
!.env.example

# COMPOSER
/vendor/*

# CRAFT STORAGE
/storage/*
!/storage/.gitkeep
!/storage/rebrand

# ASSETS
/web/uploads/*
/web/resources/*
/web/feeds/*
!/web/uploads/.gitkeep
/web/imager/*
/web/transforms/*
/web/cpresources/*
/web/cp-resources/*
/scripts
/feeds

# BUILD FILES
/bower_components/*
/node_modules/*
/build/*
/yarn-error.log
/npm-debug.log

# MISC FILES
.cache
.DS_Store
Thumbs.db
.idea/*
.project
.settings
*.esproj
*.sublime-workspace
*.sublime-project
*.tmproj
*.tmproject
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
config.codekit3
prepros-6.config

#Sitemaps
ror.xml
sitemap.xml
urllist.txt

[philipp-spiess]

Not sure what you want when you say Can you post a repro? ?

Ah, sorry for not being clear enough. It would be helpful if you can create a small repository that reproduces the error and send us the link to it (e.g. via a GitHub repository). Ideally we can run the setup locally so that we can quickly iterate on it and figure out whats wrong.

From the two files you posted there's nothing that stands out to me I'm afraid.

What you could also try is to do a Vite build but set the DEBUG environment variable to 1. That should print a bunch of Tailwind CSS diagnostics that might help us pinpoint into what the issue is.

[SeppahBaws]

I'm having the same issue with @tailwindcss/vite 4.0.10

Running with DEBUG env var, I get this for the output after saving a small edit on a page in my sveltekit project:

[86.09ms] [@tailwindcss/vite] Generate CSS (serve)
[21.64ms]   ↳ Scan for candidates
[ 1.55ms]   ↳ Build CSS

However, it takes ~30 seconds for the app.css updates to reach my browser.

The generated app.css file is 138KB but it still shouldn't take this long to send back to the client.

I can try putting a repro together when I find some spare time...

[njacob1001]

since version 4.0.8 the sidebar of shadcnui is not working anymore and the rest of style looks different

[woozyking]

Encountering similar issue with a React project (using react-router v7 as framework), temp workaround for us is to downgrade and pin both tailwindcss and @tailwindcss/vite to 4.0.7

EDIT (2025-03-07T19:32:52+0000)
Pinning the build slowdown to "@tailwindcss/vite": "4.0.10", while tailwindcss itself can be updated to 4.0.12 without any issue. So theoretically having "tailwindcss": "^4.0.12" and "@tailwindcss/vite": "4.0.9" builds okay.

EDIT (2025-03-10T14:31:05+0000)
Some CPU profile highlighting the difference

[senseiod]

I have the same question :)

[philipp-spiess]

@woozyking Any chance you can send us the full .cpuprofile? Would love to dig into this.

[woozyking]

@woozyking Any chance you can send us the full .cpuprofile? Would love to dig into this.

Here you go

react-router-0.tailwind_vite_4.0.11.cpuprofile

[philipp-spiess]

@woozyking Hey! Regarding your issue: the last patch release contained a fix that prevents binaries from being scanned (that resulted in a similar performance regression in a different GitHub issue). Do you mind upgrading to it and seeing if that's still an issue? If yes, I'd appreciate if you can put together a reproduction that you can share with us so we can have a look. The best guess is that somehow a file is being scanned that isn't supposed to be scanned.

[woozyking]

@woozyking Hey! Regarding your issue: the last patch release contained a fix that prevents binaries from being scanned (that resulted in a similar performance regression in a different GitHub issue). Do you mind upgrading to it and seeing if that's still an issue? If yes, I'd appreciate if you can put together a reproduction that you can share with us so we can have a look. The best guess is that somehow a file is being scanned that isn't supposed to be scanned.

Great. I can confirm with the following version, the generate step for tailwind in vite build behaves normally

"@tailwindcss/vite": "4.0.14",
"tailwindcss": "4.0.14",

[SeppahBaws]

I'm still seeing the same issue, but some profiling shows that another vite plugin we're using seems to be causing the slowdown.
Although I'm not sure why a function in that plugin would go from 6000 hits to 18000 hits by bumping tailwindcss and @tailwindcss/vite from 4.0.7 to 4.0.14.

Still trying to find a way to reproduce this in a clean project...

[terryupton]

I am also still seeing the issue and fixing to "@tailwindcss/vite": "4.0.7", is still the fix at the moment.

[filipbekic01]

Confirming that versions >= 4.0.8 are extremely slow (tested on MacBook M1 Pro).