TailwindCSS is a very popular utility-class-based styling library for quickly creating visually stunning prototypes or production websites and web applications. It has one downside (which it is slowly fixing already), and that is its file size.

Tailwind has CSS classes for anything ranging from a zero-width margin to flex fox controls and a whole range of colors. This will bloat CSS file sizes massively as you’d expect. But thankfully, the creators of Tailwind have made it easy for us to remove all unused classes for production.

According to its own documentation, a default development configuration of Tailwind is about 3739Kb big, which doesn’t harm in the development phase, but it is horrible for SEO and UX in the production phase.

It can be smaller when GZipped or compressed with Brotli which will make it only 71Kb. But this is the full Tailwind file which is big by design for easy development. In production, we want to make this smaller and remove all resources we don’t use.

#javascript