twcss very slow in dev, >30s to load page after hmr update/ssr reload

[gschwim]

What version of Tailwind CSS are you using?

4.1.3

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

sveltekit 2.20.4, vite 6.2.4

What version of Node.js are you using?

22.14.0

What browser are you using?

chrome, brave

What operating system are you using?

MacOS

Reproduction repo is here

Describe your issue

Base sveltekit install, added tailwindcss, imported to src/app.css. Once the import is added any change to content, css, or otherwise takes >30 seconds to refersh in the browser. I found [this issue](https://github.com/tailwindlabs/tailwindcss/issues/17522#issue-2968155486} that describes what I'm seeing very well, but the times are much longer, and I'm running the version of twcss that should have the fix.

I ran pnpm run dev with env variable DEBUG=1 and received the following output (annotated):

➜ ➜ pnpm run dev --host

> sk-demo@0.0.1 dev /Users/demo/tmp/sk-demo
> vite dev --host


  VITE v6.2.4  ready in 2077 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://172.16.1.194:5173/
  ➜  Network: http://172.16.3.5:5173/
  ➜  press h + enter to show help

[27945.47ms] [@tailwindcss/vite] Generate CSS (serve)
[  198.84ms]   ↳ Setup compiler
[    2.35ms]   ↳ Setup scanner
[12870.16ms]   ↳ Scan for candidates
[  886.94ms]   ↳ Build CSS


[25024.72ms] [@tailwindcss/vite] Generate CSS (serve)
[   48.78ms]   ↳ Setup compiler
[    0.09ms]   ↳ Setup scanner
[10152.08ms]   ↳ Scan for candidates
[  802.87ms]   ↳ Build CSS

end cold start, making change to +page.svelte and saving:

[14450.78ms] [@tailwindcss/vite] Generate CSS (serve)
[ 7107.51ms]   ↳ Scan for candidates
[   38.39ms]   ↳ Build CSS

9:24:33 PM [vite] (client) hmr update /src/routes/+page.svelte, /src/app.css
9:24:33 PM [vite] (ssr) page reload src/routes/+page.svelte

[14511.12ms] [@tailwindcss/vite] Generate CSS (serve)
[ 7648.28ms]   ↳ Scan for candidates
[   29.07ms]   ↳ Build CSS

9:24:48 PM [vite] (client) hmr update /src/routes/+page.svelte, /src/app.css
9:24:48 PM [vite] (ssr) page reload src/routes/+page.svelte

now a change to +layout.svelte

9:25:25 PM [vite] (client) hmr update /src/routes/+layout.svelte, /src/app.css
9:25:25 PM [vite] (ssr) page reload src/routes/+layout.svelte

[13850.72ms] [@tailwindcss/vite] Generate CSS (serve)
[ 6885.26ms]   ↳ Scan for candidates
[   76.62ms]   ↳ Build CSS


[14184.31ms] [@tailwindcss/vite] Generate CSS (serve)
[ 7385.91ms]   ↳ Scan for candidates
[   24.50ms]   ↳ Build CSS

So on average, very minor changes to the files above cause a >40 second time for processing before the page reloads. This also extends to app.css changes.

[RobinMalfait]

Hey!

I'm a bit puzzled by this because I don't see this behavior at all with your reproduction:

So going to ask a few questions to hopefully get to the bottleneck:

1. Can you make sure that you are on the latest version (rm -rf node_modules && pnpm install). I know that pnpm-lock.json shows 4.1.3 but not sure what's in your node_modules
2. Can you try and remove any caches such as the .svelte-kit folder
3. Are you running in a different environment, like Docker or similar?
4. Are you running in a symlinked folder of any kind?
5. Are you on an old computer with an old HDD? Even then it shouldn't be this slow though.
6. Is your real project a git directory, or is there no git involved?
7. Is this reproduction a minimal reproduction or your actual project? The timings you see are on this exact reproduction, right?
8. Are there any (big) generated folders in the demo that are ignored and thus not published to GitHub?

The reason I ask is because we did ship a regression recently around slow rebuilds, and the latest version tackles those issues, which is why I want to be 100% sure you are on the latest version.

If none of these make any change, one thing you could try is to explicitly mark some folders as non-source folders:

  @import 'tailwindcss';
  @plugin '@tailwindcss/forms';
  @plugin '@tailwindcss/typography';

+ @source not "../node_modules";
+ @source not "../.svelte-kit";

[gschwim]

Thanks for the reply. Item by item responses below.

Can you make sure that you are on the latest version (rm -rf node_modules && pnpm install). I know that pnpm-lock.json shows 4.1.3 but not sure what's in your node_modules

Done - in fact, I started with a fresh sveltekit install pnpx sv create . to ensure I didn't have an artifact involved. I get the same result.

Can you try and remove any caches such as the .svelte-kit folder

see above

Are you running in a different environment, like Docker or similar?

I am running a nix flake to set the environment up. It provides node and pnpm. Everything else is from my user environment/os.

Are you running in a symlinked folder of any kind?

Actually looking at node_modules I do see that it is populated by symlinks pointing at .pnpm. Testing w/ npm which appears to not do this. Details below.

Are you on an old computer with an old HDD? Even then it shouldn't be this slow though.

Macbook Pro, i9, ssd, 32gb. Should be plenty of hardware capability

Is your real project a git directory, or is there no git involved?

real project is in a git repo, have not seen it behave differently.

Is this reproduction a minimal reproduction or your actual project? The timings you see are on this exact reproduction, right?

Correct, I aim to use twcss in the main project. This problem starts right after twcss is installed and imported by app.css, with just the minimal sveltekit project installed via pnpm sv create . Before twcss is installed things appear to run fine.

Are there any (big) generated folders in the demo that are ignored and thus not published to GitHub?

Nothing that I intentionally ignored.

Re: symlinks and .pnpm, I removed node_modules and the lock file, and used npm to install and run the project. I get similar, but slower results.

Just in case I reverted to node 20.19.0 but this didn't make a difference.

I added the @source not ... suggestion you mentioned but that doesn't appear to make a difference either.

[gschwim]

I believe I may have isolated the issue. It is related to my environment set up.

It seems that pnpm run dev wants to scan the entire directory structure starting from where it was run. I was unaware of this.

I use direnv to automatically enable my node environment when I cd into the repo directory. I noticed when I add the cache folder it creates .direnv to .gitignore things work properly, no massive delays loading a page. I also tested by adding @source not '../.direnv'; to app.css and that gets the trick done as well.

Closing this issue given the above. Thanks much for pointing me in the right direction!