Basic14 min read

Utility Classes

Master Tailwind utility-first approach — layout, spacing, typography, colors, and the composable patterns that replace traditional CSS.

Layout Utilities

Flexbox and Grid utilities handle most layout needs. flex, grid, block, inline, and hidden control display. Direction, wrap, and alignment utilities compose complex layouts from single-purpose classes.

Tailwind spacing scale is consistent — gap-4, p-4, and m-4 all use the same 1rem value. Once you learn the scale, spacing decisions become automatic.

Use flex-1 for growing items, shrink-0 to prevent compression
grid-cols-12 with col-span-* for precise grid placement
hidden and block toggle visibility without removing from DOM

<div class="flex items-center justify-between gap-4">
  <nav class="flex gap-6">...</nav>
  <button class="shrink-0">Sign In</button>
</div>

<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
  <div class="col-span-1">Sidebar</div>
  <div class="col-span-2">Main</div>
</div>

Spacing Scale

Tailwind spacing uses a 4px base unit. p-1 is 0.25rem (4px), p-4 is 1rem (16px), p-8 is 2rem (32px). Directional variants: px (horizontal), py (vertical), pt/pr/pb/pl (individual sides).

Negative margins (-mt-4) pull elements outside their flow. Space-x and space-y add margin between child elements without affecting the last child.

<div class="px-6 py-4 space-y-4">
  <section class="p-6 rounded-xl">Card with padding</section>
  <section class="px-6 py-3">Compact section</section>
</div>

Typography

Text size utilities (text-sm through text-9xl) control font size. Font weight (font-normal, font-bold), line height (leading-tight, leading-relaxed), and letter spacing (tracking-tight) refine typography.

Text color utilities use the same palette as backgrounds. text-gray-600 for body, text-gray-900 for headings. truncate, line-clamp-2, and text-ellipsis handle overflow.

<h1 class="text-4xl font-bold tracking-tight text-gray-900">
  Page Title
</h1>
<p class="text-base leading-relaxed text-gray-600 max-w-prose">
  Body text with comfortable line length and muted color.
</p>

Colors and Opacity

Tailwind color palette spans 50 (lightest) to 950 (darkest) for each hue. Apply to text (text-blue-600), backgrounds (bg-gray-100), borders (border-red-500), and rings (ring-green-500).

Opacity modifiers append /50 for 50% opacity: bg-blue-500/50, text-black/75. Arbitrary values work too: bg-[#1da1f2] for exact brand colors.

Use semantic color names in config: success, warning, danger
Dark mode variants: dark:bg-gray-800 dark:text-white
Arbitrary values: w-[137px], top-[117px] for pixel-perfect layouts

<div class="bg-white border border-gray-200 rounded-lg shadow-sm">
  <span class="bg-green-100 text-green-800 text-sm px-2 py-1 rounded-full">
    Active
  </span>
</div>

State Variants

Prefix utilities with state variants: hover:, focus:, active:, disabled:, and group-hover: for parent-triggered styles. Combine variants: hover:focus:ring-2.

The group pattern lets parent hover affect children: mark the parent with group, then use group-hover:text-blue-600 on children. peer variants work similarly for sibling relationships.