What Utility-First Means

From semantic class names to utilities

In traditional CSS you invent a class such as .card and write its styles in a stylesheet. With utility-first CSS you apply small, single-purpose classes directly in markup: p-6 for padding, rounded-xl for border radius, shadow-md for a shadow. Benefits: no naming fatigue, no dead CSS growing over time, styles you can read where they are used, and a consistent design scale. The trade-off is longer class lists, which you manage with components and tooling.

Small classes, composed in markup

Tailwind provides single-purpose classes that you combine in HTML instead of writing custom CSS for each component.

The same card, two ways

Custom CSS versus utilities.

<!-- Traditional: a class plus a stylesheet rule elsewhere -->
<div class="card">...</div>
<style>
  .card { padding: 1.5rem; border-radius: 0.75rem; background: white;
          box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); }
</style>

<!-- Utility-first: the styles are visible in the markup -->
<div class="p-6 rounded-xl bg-white shadow-md">...</div>

Building with LEGO bricks

Instead of carving each toy from wood, you snap together standard bricks. Every toy looks consistent, and you never carve the same piece twice.

त्वरित जाँच: What is a core idea of utility-first CSS?

• Avoiding HTML classes entirely
• Writing one large class per page
• Composing small single-purpose classes directly in markup
• Using only inline style attributes