"@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.