Get hands-on with Tailwind's utility-first approach — read class names like CSS shorthand, reach for arbitrary values, and learn the modifiers that tweak any utility.
Why: instead of writing custom CSS, you compose a design directly in your markup from small, single-purpose classes. Each class maps to one CSS declaration — there's no separate stylesheet to maintain or name things in.
<div class="mx-auto max-w-sm rounded-xl bg-white p-6 shadow-lg ring-1 ring-slate-200">
<img class="mx-auto h-16 w-16 rounded-full" src="https://i.pravatar.cc/64" alt="Avatar" />
<div class="mt-4 text-center">
<h2 class="text-lg font-semibold text-slate-900">Jane Cooper</h2>
<p class="text-sm text-slate-500">Product Designer</p>
<button class="mt-4 rounded-md bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-700">
Message
</button>
</div>
</div>Why: utilities follow a property-value pattern. mt-4 = margin-top, step 4 of the spacing scale (1rem). text-lg = font-size large. bg-blue-500 = background-color, blue palette, shade 500. Once you know the pattern, you can guess most class names correctly.
<div class="space-y-6 p-4">
<div>
<p class="mb-2 font-mono text-xs text-slate-500">Spacing scale: p-1 → p-8</p>
<div class="flex items-end gap-2">
<div class="bg-indigo-500 p-1"><div class="h-4 w-4 bg-indigo-200"></div></div>
<div class="bg-indigo-500 p-2"><div class="h-4 w-4 bg-indigo-200"></div></div>
<div class="bg-indigo-500 p-4"><div class="h-4 w-4 bg-indigo-200"></div></div>
<div class="bg-indigo-500 p-8"><div class="h-4 w-4 bg-indigo-200"></div></div>
</div>
</div>
<div>
<p class="mb-2 font-mono text-xs text-slate-500">Font size scale: text-sm → text-3xl</p>
<p class="text-sm">text-sm</p>
<p class="text-base">text-base</p>
<p class="text-xl">text-xl</p>
<p class="text-3xl">text-3xl</p>
</div>
<div>
<p class="mb-2 font-mono text-xs text-slate-500">Color scale: bg-blue-100 → bg-blue-900</p>
<div class="flex gap-1">
<div class="h-8 w-8 bg-blue-100"></div>
<div class="h-8 w-8 bg-blue-300"></div>
<div class="h-8 w-8 bg-blue-500"></div>
<div class="h-8 w-8 bg-blue-700"></div>
<div class="h-8 w-8 bg-blue-900"></div>
</div>
</div>
</div>Why: when no utility exists for the value you need, use square-bracket syntax to drop in any CSS value — bg-[#1da1f2], text-[22px], w-[calc(100%-4rem)] — without leaving your markup or writing a separate stylesheet. Note: you rarely need brackets for spacing, because v4's spacing scale is dynamic — any multiple of 0.25 works, so w-[137px] is just w-34.25 (34.25 × 4px).
<div class="space-y-4 p-4">
<div class="flex h-10 w-[calc(100%-4rem)] items-center justify-center rounded bg-[#1da1f2] text-xs text-white">
w-[calc(100%-4rem)] bg-[#1da1f2]
</div>
<div class="flex h-10 w-34.25 items-center justify-center rounded bg-slate-700 text-xs text-white">
w-34.25 — the dynamic scale already covers 137px
</div>
<div class="flex h-10 w-48 items-center justify-center rounded bg-[hsl(280,90%,60%)] text-xs text-white">
bg-[hsl(280,90%,60%)]
</div>
<p class="text-[22px] font-semibold text-slate-800">text-[22px]</p>
</div>Why: prefix any spacing or transform utility with - for negative values (-mt-4, -translate-x-1/2 for centering). Suffix any utility with ! to force !important when something else with higher specificity is winning — in v4 the ! goes at the end (text-red-600!), not the front.
<div class="p-8">
<div class="flex">
<div class="h-16 w-16 rounded-full bg-indigo-500 ring-2 ring-white"></div>
<div class="-ml-4 h-16 w-16 rounded-full bg-pink-500 ring-2 ring-white"></div>
<div class="-ml-4 h-16 w-16 rounded-full bg-amber-500 ring-2 ring-white"></div>
</div>
<p class="mt-6 text-sm text-slate-500">-ml-4 overlaps each avatar with the previous one.</p>
<p class="mt-6 text-red-600 underline" style="color: blue;">
text-red-600 loses to the inline style — still blue
</p>
<p class="mt-2 text-red-600! underline" style="color: blue;">
text-red-600! forces !important — wins over the inline style
</p>
</div>