Utilities shrink both files

After gzip, utility classes often ship less CSS and less HTML.

Adam Wathan@adamwathan
Simulating “semantic” class names vs utility classes, after compression Tailwind often produces not just smaller CSS files, but smaller HTML too. Fast to prototype with, extremely maintainable at scale, and great for performance. Rare trifecta 🎯
Dec 19, 2021View on X ↗

This page generates its own cards and gzips them here. Sizes come from your browser.

Same cards, two ways

Drag the slider and watch both files grow.

Semantic namesBad
Utility classesGood
<div class="p-4 rounded-lg bg-white shadow-sm">
  <h3 class="text-lg font-semibold">Title</h3>
  <p class="text-sm text-gray-500">Body</p>
</div>
/* each utility is defined once, however many cards use it */

CSS size as cards grow

Measured for 0 to 200 cards. The dot marks your count.

Gzipped CSSbytes
SemanticUtility

Why it matters, pros and cons

Why it matters

Utilities repeat, so they compress well and the CSS stops growing. Names do not repeat.

Pros

  • CSS size tracks the design's choices, not the page count.
  • Repeated class strings compress to almost nothing.
  • No new class name for every new component.

Cons

  • The result depends on how repetitive your design is.
  • This model is small. Measure your own build.
  • Plain HTML gets longer before it is compressed.