Slow compile when using @apply
Problem
I've been experiencing slow compile times when using the @apply rule in my CSS. Here's an example: `.HomePage main .plan h3 { @apply .content-none .absolute .block .border-solid }` Despite having a powerful machine, as the CSS grows, the compile time goes up. It's now gotten to a point where even when running a watcher on save it is over 1.5s. Enough to slow down my workflow. I'm only looking at 100+ lines of CSS (for components). Are there any reasons why it might be slow? Thanks! EDIT: I've determined that it is being caused by the size of the tailwind config JS file. The resulting CSS file being generated is ~500 KB. I've stripped out some colours, but I've added items too e.g. margins and padding. If I have to remove them to get a usable compile time, doesn't that kinda defeat the point of the framework? I want to have many utilities available to me. I think the solution is too structure the build process so that the tailwind config isn't recompiled every time. However, I wonder if this presents a problem with using @apply?
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Solution: Slow compile when using @apply
Hi, I'm still seeing a significantly slow build time using tailwind with laravel mix. I don't know if its the same issue as this, but running `yarn run watch` (I only have one CSS file being compiled), each build is taking anywhere between 3-6 seconds. On OSX 10.11.6 Thanks
Trust Score
6 verifications
- 1
Hi, I'm still seeing a significantly slow build time using tailwind with laravel
Hi, I'm still seeing a significantly slow build time using tailwind with laravel mix. I don't know if its the same issue as this, but running `yarn run watch` (I only have one CSS file being compiled), each build is taking anywhere between 3-6 seconds.
Validation
Resolved in tailwindlabs/tailwindcss GitHub issue #443. Community reactions: 15 upvotes.
Verification Summary
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep