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

[philipp-spiess]

Hey folks! Reminder that we still don't have a reproduction for this issue so can't really investigate to figure out what's going on. If someone could provide something that'd be of great help.

[tietiezhi-1216]

这似乎可以解决这个问题，请在main.css中添加一行指令来控制css的生成检测

@import 'tailwindcss' source(none);

这样的情况下就不会检查所有的资源在你每次更新以后，仅仅会更新当前正在编辑的文件，这非常有效！

可以查看官方文档https://tailwindcss.com/docs/detecting-classes-in-source-files#disabling-automatic-detection

[filipbekic01]

这似乎可以解决这个问题，请在main.css中添加一行指令来控制css的生成检测
@import 'tailwindcss' source(none);
这样的情况下就不会检查所有的资源在你每次更新以后，仅仅会更新当前正在编辑的文件，这非常有效！

可以查看官方文档https://tailwindcss.com/docs/detecting-classes-in-source-files#disabling-automatic-detection

That indeed solves the problem!

[GuilleMarejada]

这似乎可以解决这个问题，请在main.css中添加一行指令来控制css的生成检测

@import 'tailwindcss' source(none);

这样的情况下就不会检查所有的资源在你每次更新以后，仅仅会更新当前正在编辑的文件，这非常有效！

I started having this problem when updating to version 4.1.1, by adding @import 'tailwindcss' source(none); it has been fixed.

[SeppahBaws]

Aha, source(none) or source("../src") seems to fix it for me as well.

@philipp-spiess this lead me to be able to create a reproduction. It seems to be a side-effect of having a pretty large node_modules folder, as it does not seem to happen on a fresh svelte project.

Here's my reproduction repo: https://github.com/SeppahBaws/tailwind-slow-reload-reproduction - I added all the dependencies we're using at work, good for some 700MB of node_modules.

You can see it in action here:
https://github.com/user-attachments/assets/7b1fca3a-3a10-4d65-b029-6677b8b48bdf

[RobinMalfait]

Hmm, not seeing that behavior here. Fwiw, we don't even scan any of the node_modules at all, so that can't be it. I did confirm I do have almost a GB worth of node_modules.

This is the behavior I see. While it's not instant, it's also not a second but <200ms.

Screen.Recording.2025-04-02.at.15.57.08.mov

This might be an issue on Windows issue. We'll do some testing there with your repo, Thanks!

[philipp-spiess]

Quick update: We've found the issue here and are investigating a fix for it. We'll share more information here when we have an update, hopefully very soon!

[tietiezhi-1216]

It is best to do the following to fix, I think twcss checked the entire node modules

@import 'tailwindcss' source(none);
@source '../';  /*（point to src）*/

[RobinMalfait]

Hey!

This should be fixed by #17511 and will be available in the next release (later today).

[filipbekic01]

Hot reload is way slower in version 4.1.3 comparing to old 4.0.7 version.

[RobinMalfait]

@filipbekic01 make sure you are actually on v4.1.3 for both the tailwindcss and @tailwindcss/vite dependencies.

We see HMR times of ~15ms on macOS and ~20ms on Windows. If you don't see these results and you are sure you are on the latest version for both, then I would recommend to create a minimal reproduction repo and open a new issue because there is likely something wrong specific to your setup.