Optimizing Tailwind CSS Production Bundle Size

Tailwind has pretty good documentation on how to optimize production builds. But if you want to really tweak your final build, you need to do a bit more manual work to find out the best configuration for that specific project.

Cssnano Is Not a Silver Bullet

In some cases applying cssnano can actually increase your build size. The smaller your CSS file is, the more likely this is to happen. If you have only a couple of lines in your CSS file, you should definitely check if cssnano is actually helping or not.

Disable Unused Tailwind Plugins

Some Tailwind plugins add code to your final CSS even if the features aren’t used and PostCSS is properly configured. My own Vite + Vue 3 + Tailwind CSS starter template for example has many Tailwind plugins enabled by default, and if you don’t disable the ones you actually use, chances are your final CSS build is bigger than it needs to be.

Practicality Beats Purity

In most cases, when your Tailwind project is configured properly, the amount of exess CSS due to plugins or nanocss is minimal. We’re talking about a handful of kilobytes at most. It’s important to put this into perspective. Do you really need to shave 2k out of a 6k CSS file? In vast majority of cases the answer is no.

But sometimes you absolutely do want to shave every possible byte of the final bundle. Then it also makes sense to test for example how well it compresses with Gzip and Btrotli to make sure your optimizations are not shooting yourself in the foot with the actual prod environment.