[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.