Why your Tailwind build is bloated (And how to fix it in 3 steps)

Tailwind CSS is an absolute game-changer for speed, but if you aren't careful, you can end up shipping a massive utility stylesheet to your users.

If your production CSS file is clocking in at over a few dozen kilobytes, something is wrong with your configuration. Luckily, getting it back down to a lightning-fast size only takes a few adjustments. Here is exactly how to audit and fix a bloated Tailwind build.

1. Stop using dynamic class strings

The number one reason Tailwind builds balloon or completely miss classes in production is dynamic string interpolation.

Tailwind’s scanner looks for unbroken, complete strings in your source files. If it sees the full string, it keeps the utility. If you break it up, it skips it.