[Bug][4.0.10 - 4.0.12] Very Slow Vercel CLI builds (30mins+) with Nuxt/Vite project using Tailwind >= 4.0.10

[silverbackdan]

What version of Tailwind CSS are you using?

For example: >= 4.0.10

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

Nuxt 3.16.0 with Vite 6.2.1

What version of Node.js are you using?

For example: v22.14.0
PNPM 10.6.1

What browser are you using?

n/a

What operating system are you using?

Vercel

Reproduction URL

A brand new Nuxt project setup as specified in docs. The issue is builds locally are absolutely fine. It's building within Vercel for these versions which has increased from ~1minute to 30mins+

There is a step in the Nuxt build script which says 'transforming' where I believe esbuild is transforming modules.

This happens twice in the build process, once for client, once for server. Each one takes around 15 minutes.

Any ideas?

I understand you'll ask for a reproduction, I totally get this and would usually try, but it'll build fine in regular environments, I'm happy to create a dummy repo if you have ability to deploy in Vercel or have ideas on what can cause this otherwise? Minimal reproduction is a basic Nuxt all with tailwind installed as docs show. Nothing else.

Describe your issue

I've had to use Tailwind v4.0.9 which is the latest version where the build is still nice and fast. What were the changes to 4.0.10 which may have caused such a slowdown in some environments?

[RobinMalfait]

Hey!

Can you still try to create a minimal reproduction repo? (and verify that your Vercel builds are slow with the minimal setup).

In the meantime, I setup a Nuxt project with Tailwind CSS v4, you can find the repo here: https://github.com/RobinMalfait/nuxt-tailwindcssv4-vercel

Then I connected it to Vercel, and it took 22seconds to deploy in Total:

There must be something going on with your project that I can't explain right now 🤔

Did this slow build happen once, or is it an issue that keeps happening?

[silverbackdan]

Hi,
Thanks for your time, and your setup is exactly what I had too as far as I can see so I'll remake my setup too.
The only difference I can see of the top of my head is in my package.json I specify:

"packageManager": "pnpm@10.6.1"

With the environment ENABLE_EXPERIMENTAL_COREPACK=1 setup in the Vercel environment variables

And an .npmrc

shamefully-hoist=true

Even if I didn't have the ENABLE_EXPERIMENTAL_COREPACK=1 variable, pnpm would be used at whatever version Vercel wanted as I have a pnpm-lock.yaml

I'll certainly get a reproduction made though, how interesting yours worked!! Thank you for your time on a Sunday evening.

Perhaps a pnpm package manager thing... maybe I'm missing some other differences in your repo to mine.

It happened every time as well, and I tried clearing build caches etc.

[RobinMalfait]

Hmm interesting, I did switch to pnpm with the changes in the package.json file, environment variable and .npmrc file. Can see it in the repo and as part of the build logs:

Still took 21s in total 🤔

[silverbackdan]

EDIT:
Misleading to the primary cause. Not related to directory structure as I thought here.

---

I'm in agreement, and was initially very confused.

I am within a repo where I have other folders for different parts of the application. An api directory for example which builds a complex API using PHP and deploys to kubernetes. I was creating a new Nuxt application within this repository, in its own directory app. This is where everything was build fine before too. And when I set it up like your example, it was suddenly 30mins when I added tailwind.

I created a new project, just like you and it built fast this time. I copied this into my main project directory structure... fast build again.

I've even then re-installed the dependencies, without implementing the rest of the Nuxt functionality to see if there may have been a conflict... but no... we are all fast again, BUT only in the flat directory structure.

When I use the same dependencies but in my other directory setup, where I have some other folders holding older versions of the Nuxt application (in Nuxt 2, we are upgrading)... transformation takes ages.

While I thought that building in vercel, my projects should be isolated, and the build should be performed just on the directory I specify, there is some crossover I think - and this transformation (only since 4.0.10 of tailwind) is now getting stuck...

I'm just quite confused that it is linked with a version change of tailwind. IS there anything in that patch which may end up changing which folders are being scanned or something?

[silverbackdan]

EDIT:
Misleading to the primary cause. Not related to directory structure as I thought here.

---

OK - the issue was this was my directory structure

~- Root - api/~~
- .. - app/ (this is the Nuxt 3 app with Tailwind)
- .. - app_nuxt2/ (Nuxt 2 old applicaiton with another css framework)
- .. ... other docker files, configs, etc. etc.

The existence of the app_nuxt2 directory caused the module transformation to slow and take 30 minutes. Even though it is the application in app/ that is being built.

Either adding the other directory to the .vercelignore or removing it entirely from the git repo has solved the issue.

So strange it only triggered when Tailwind 4.0.10 or greater was istalled though.

Bug in Tailwind/Nuxt/Neither and consider a configuration problem my side?

I feel it may actually be an issue in the Vercel Nuxt build scripts where it shouldn't matter what else exists outside the build directory for the Nuxt app being built... but maybe I'm wrong and people deploy multiple Nuxt apps at once in a single repo sometimes.

[silverbackdan]

Sorry, scratch that - I'll review this in the morning again. I thought I'd upgraded my project back to latest Tailwind, but I hadn't. The issue remains. I'll do more digging and figure out a reproduction tomorrow with a fresh head.

It is something more specific - I have the entire application in another repo, just the front-end Nuxt application with Tailwind, and it builds fine. Even in a sub directory when just linked to the git repo.

When I am trying to build from my actual repository, it has this issue with transforming. Most strange.

[silverbackdan]

Reproduced:
https://github.com/silverbackdan/tailwind-slow-test

In this case I have set my Root Directory in build settings to app - although this doesn't make a difference whether you build from the root with this setting, or you run vercel app instead of this config.

The build works fine when linked to the repository automatically.
It has this issue if I run the command to build on Vercel using the Vercel CLI vercel (if the config is set to the app dir in Vercel), or vercel app if not.

I'll do more work tomorrow to make the repo more minimal now I can see that there is a difference when it does the automated build or when the Vercel CLI is used.

[silverbackdan]

The reproduction is now as minimal as possible. Just like your example @RobinMalfait
vercel CLI command freezes on transform step for 30 min builds.
When linked to the git repo, the automated build works fine.

My config to make it so an automatic link will work is to set the Root directory in Vercel to app

Then from the root of the github rope just run vercel and this CLI version will hang. Only on Tailwind 4.0.10 and above.

[silverbackdan]

[hwkdev]

Just my 2 cents on this topic, if that helps:

I also had very long compilation time since version >=4.0.10, using gulp.

After few hours trying to figure it out, I noticed the issue was gone once a specific package was uninstalled. Removing the package usage from the code was not enough, it had to be uninstalled.

This leads me to believe 4.0.10 introduced changes in the @source logic. It seems like it now scans deeply all files within node_modules. So if you have a lot of packages, or packages with some "problematic files", it might impact performance. I'm not sure why as I couldn't find time to dig deeper.

I managed to fix the issue by setting up specific @source rules with file types. I also re-installed the "problematic" package and my performance are back to normal, which means there's definitely something up with @source. Usage Example:

@import "tailwindcss" source(none);
@source "../../**/*.php";
@source "../../**/*.html";

This will still scan node_modules, and potentially add unwanted classes, but the performance went back to normal.

Additionally, I opened a suggestion to let @source exclude folders/files similarly to glob(), which isn't possible at the moment.

[silverbackdan]

@hawkidoki your 2 cents are worth a million dollars in this case. Thank you.
Indeed the change of directories being scanned in 4.0.10 causes this crazy time to build when running Vercel CLI.

Hopefully there will be some info in this ticket to resolve why so many files are being scanned which can cause this.

Thanks for all your help.

[silverbackdan]

Summary of the issue now replicable on the same minimum implementation as shown by @RobinMalfait originally.

I've updated my minimum reproduction repo. https://github.com/silverbackdan/tailwind-slow-test

Vercel CLI time to build approx 29-37minutes.
Build triggered from linked git repo - 28seconds

The workaround solution for now.

/assets/css/main.css

@import "tailwindcss" source(none);

@source "../../**/*.vue";
@source "../../**/*.ts";

Thank you all for helping me out on this issue to find out the scenario in which this can be reproduced and the workaround.

If there's anything else I can do, or if the issue lies in another repo for the tailwind vite builder, please do let me know.

I'm hoping with this info the issue which has occurred since 4.0.10 can be resolved in an easy way.

[philipp-spiess]

Hey! We were able to reproduce this. It seems like the Vercel CLI automatically removes the .gitignore file from the repo when uploading (something that is not happening when you link the repository via GitHub). We'll make some changes to how @source works so that this is not as bad anymore.

However, to fix your immediate issue, please add a .vercelignore file with the following content to allow-list the file:

!.gitignore

[silverbackdan]

@philipp-spiess - great stuff, thank you - what strange behaviour from Vercel but top response times and investigation from you folk in TW. Appreciate you lots.

[philipp-spiess]

We've identified that main reason for these slow builds and will include a fix for this in the next patch release. Thanks again!

[silverbackdan]

I saw the PR and makes total sense. Thank you too. Great to see the improvements found in the JSON pre-processor PR too. Have a great week.

[silverbackdan]

For information, the optimisation to include !.gitignore in the .vercelignore still improves build times.

When I have my build cache disabled...

v4.0.13 built in 1m28s with the fix above.
v4.0.14 without the !.gitignore then built in 2m10s

42 seconds slower

I then removed the environment variable which disabled the build cache

it then built 4.0.14 in
1m41s and then 1m47s

Then adding !.gitignore back into .vercelignore using 4.0.14 build times were
1m2s and then 1m37s and then 1m47s

Conclusion: adding !.gitignore into the .vercelignore file when using the Vercel CLI seems to still have a significant impact (potentially) on build/transform times still using v4.0.14

I'm not sure if Vercel started throttling me after a few builds, but I'd be interested to see if this fix proposed still has any impact for others in their build times. I'm feeling inclined to keep this fix in place for the potential build time gains and no downsides to keeping it in there.

Thanks again all.

---

Further to this, my builds are now 1m to 1m10s with the fix above to make sure gitignore is still included in the Vercel CLI command to build. It was consistently 1m28s to 1m47s before. So a big improvements just by adjusting the .vercelignore file