Slow build

[guillaumebriday]

Describe the bug
When I require the require('@tailwindcss/ui') in my plugins section, my webpack compilation process become incredibly slower.

Going from ~10s/15s to ~1:30 min.

Do you have any idea how to solve this?

Thank you! 🙏

To Reproduce
Steps to reproduce the behavior:

1. Require require('@tailwindcss/ui') in the tailwind config file.
2. Compile your assets

[keyurshah]

i'm having a similar issue as well. it's taking me about 40-60 seconds on a windows hex core with 32 GB of ram. i tried adding and removing code in my compile step (laravel mix), and it seems mostly to be tailwindui for me as well.

[guillaumebriday]

As I can see in my node_modules/@tailwindcss/ui/index.js file, TailwindUI adds tons of options like spacings, widths, variants etc.

Maybe it comes from that but actually we cannot fine tune this config I think.

[simonswiss]

Hey,

Is this still an issue for you? Would you be able to share a reproduction in a GitHub repo?

Is this happening with the default config + Tailwind UI, or are there a bunch of extra variants enabled, which make the file size bigger?

I am not able to reproduce this error, but would love to take a look.

[guillaumebriday]

Hey @simonswiss

Yes it is. I think it's related to tailwindlabs/tailwindcss#443 or tailwindlabs/tailwindcss#1514

Because tailwind UI adds utilities, that's why it takes a long time to build.

Any ideas?

Thanks!

[simonswiss]

Would you be able to share a repo with your Taliwind config, PostCSS config and webpack setup, so I can have a look?

Hard to tell what happens without a specific use case. Compiling Tailwind with the added Taliwind UI utilities (extra colors, spacing) should not be significantly slower.

[guillaumebriday]

Ok sure I'll try do create a repo.

Maybe next week 🤞

[guillaumebriday]

Hey, sorry for the late response.

I didn't find time to create a repo with the exact same config but the two issues I mentioned in my last comment and this post : https://rubyyagi.com/solve-slow-webpack-compilation/ helped me to solve my issue.

It's still not that perfect but manageable now. I think, it should be explain in the documentation though. 👍

[khalwat]

@guillaumebriday very similar article I wrote here, if it's helpful -- check to see how you're doing your CSS sourcemaps (if at all):

Speeding Up Tailwind CSS Builds

[davidluhr]

As of the latest Tailwind UI release, there is no longer a dedicated UI plugin, and various other build improvements with Tailwind CSS 2.0. We've also reduced the number of additional classes to generate for Tailwind UI.

Are you experiencing these issues still with the latest versions?

[khalwat]

@davidluhr yes, see this thread please: tailwindlabs/tailwindcss#2820

[davidluhr]

@khalwat Thank you for the followup. I'm going to close this particular issue here so we can track your issue in the Tailwind CSS repo.