Why Utility Classes?

Why Utility Classes?

Using utility classes directly in your markup contradicts a lot of traditional best practices, but it has some powerful benefits once you try it.

Benefits over traditional CSS

• Designing with constraints - every value comes from a predefined design system, so your UI stays visually consistent instead of using magic numbers.
• Hover, focus, and other states - inline styles can't target :hover or :focus, but Tailwind's state variants can.
• Media queries - you can't use media queries in inline styles, but Tailwind's responsive variants make fully responsive UIs easy.

Isn't this just inline styles?

A common reaction: "isn't this just inline styles?" In some ways yes - you apply styles directly to elements. But utilities win over inline styles because:

1. Design system - values come from a theme, not magic numbers.
2. State variants - hover:, focus:, sm:, dark:, and more.
3. Media queries - built-in responsive breakpoints.

The core syntax

You combine utilities with a space between them:

<div class="mx-auto flex max-w-sm items-center gap-x-4 rounded-xl bg-white p-6 shadow-lg">
  <img class="size-12 shrink-0" src="/img/logo.svg" alt="Logo" />
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-gray-500">You have a new message!</p>
  </div>
</div>

Notice how each class controls exactly one thing:

• flex and items-center handle layout
• max-w-sm and mx-auto constrain and center the card
• bg-white, rounded-xl, shadow-lg handle appearance
• size-12 sets both width and height of the logo
• text-xl, font-medium, text-black style the text

TL;DR

• Utilities give you a design system instead of magic numbers.
• They support states and media queries that inline styles can't.
• Combine small classes in HTML to build complete designs.