Why composing small utilities beats writing custom CSS: naming, consistency, refactoring and team scale.

The idea#

Instead of naming layout chunks after features ("product-card"), you describe intent with utilities ("p-4 flex gap-2"). Names stop being a design argument, CSS stops growing forever, and every teammate reads the same vocabulary. Utility-first scales with team size because the stylesheet is a fixed, documented language instead of an ever-growing pile of one-off selectors.

In practice#

example
html
<div class="flex items-center gap-4 p-4 rounded-xl shadow-md">
  <img class="h-12 w-12 rounded-full" src="a.jpg" alt="" />
  <div>
    <h3 class="font-semibold">Nakshora</h3>
    <p class="text-sm text-slate-500">Utility-first, not class-soup.</p>
  </div>
</div>

Common mistakes#

  • Reaching for custom CSS before checking the reference — a utility almost always exists
  • Duplicating long class strings instead of extracting a component in your framework of choice
  • Mixing paradigms in one element (half utilities, half custom selectors)

Keep learning#

Next: concepts/design-tokens|Design tokens and utilities/index|the utilities reference put this concept to work. For the big picture, see getting-started/introduction|the introduction.