Styling with Utility Classes

A utility class does one job: flex sets display: flex, p-5 sets padding: calc(var(--spacing) * 5) (1.25rem, as --spacing defaults to 0.25rem) and text-gray-500 sets color: var(--color-gray-500). Unlike inline styles, utilities use design tokens and accept state and media variants.

A card, a button and an important override built from utilitiesHTMLLive

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div class="flex flex-wrap items-center gap-4 bg-slate-100 p-4">
  <div class="flex items-center gap-4 rounded-xl bg-white p-5 shadow-lg outline outline-black/5">
    <div class="grid size-12 place-items-center rounded-full bg-sky-500 text-xl text-white">C</div>
    <div><p class="text-xl font-medium">ChitChat</p><p class="text-gray-500">New message!</p></div>
  </div>
  <button class="rounded-full bg-violet-500 px-5 py-2 font-semibold text-white">Save</button>
  <p class="rounded-md bg-teal-500 bg-red-500! p-2 text-sm text-white">bg-red-500! wins</p>
</div>

Browser output of Listing 5.10 — Browser output of 10

When two classes set one property, the rule later in the stylesheet wins, whatever the order in class: grid flex gives display: grid. To beat other CSS, append ! (bg-red-500!; the v3 form !bg-red-500 is deprecated), import with @import "tailwindcss" important;, or add prefix(tw) to get tw:flex. Pass dynamic values as inline variables, style="--brand: #316ff6" class="bg-(--brand)", and remove repetition with loops and components (Tailwind with Frameworks).

MENU