Control padding, margin, width, height, and the gaps between elements — the utilities you'll reach for in nearly every component.
Why: p-* sets padding on all sides, px-*/py-* set horizontal/vertical, and pt/pr/pb/pl-* target one side. m-* works the same way for margin, and mx-auto centers a block element horizontally.
<div class="space-y-4 bg-slate-100 p-4">
<div class="bg-indigo-500 p-2 text-center text-xs text-white">p-2</div>
<div class="bg-indigo-500 p-6 text-center text-xs text-white">p-6</div>
<div class="bg-indigo-500 px-8 py-2 text-center text-xs text-white">px-8 py-2</div>
<div class="mx-auto w-32 bg-pink-500 p-2 text-center text-xs text-white">mx-auto</div>
</div>Why: w-* / h-* set fixed sizes from the spacing scale, fractions like w-1/2 and w-2/3 split space proportionally, and max-w-* caps how wide an element can grow — essential for readable text columns and cards.
<div class="space-y-4 p-4">
<div class="flex gap-2">
<div class="flex h-12 w-1/3 items-center justify-center bg-emerald-500 text-xs text-white">w-1/3</div>
<div class="flex h-12 w-2/3 items-center justify-center bg-emerald-700 text-xs text-white">w-2/3</div>
</div>
<div class="flex h-12 w-full items-center justify-center bg-sky-500 text-xs text-white">w-full</div>
<div class="mx-auto max-w-xs rounded bg-slate-200 p-4 text-center text-xs">
max-w-xs keeps this box narrow no matter how wide the screen is.
</div>
</div>Why: space-x-* / space-y-* add margin between sibling elements without margin on the first or last child. divide-x / divide-y add a border between siblings — perfect for button groups and lists.
<div class="space-y-6 p-4">
<div class="flex space-x-4">
<button class="rounded bg-slate-800 px-3 py-1.5 text-sm text-white">One</button>
<button class="rounded bg-slate-800 px-3 py-1.5 text-sm text-white">Two</button>
<button class="rounded bg-slate-800 px-3 py-1.5 text-sm text-white">Three</button>
</div>
<ul class="divide-y divide-slate-200 rounded border border-slate-200">
<li class="px-4 py-2 text-sm">First item</li>
<li class="px-4 py-2 text-sm">Second item</li>
<li class="px-4 py-2 text-sm">Third item</li>
</ul>
</div>Why: gap-* (or gap-x-* / gap-y-*) adds consistent spacing between flex or grid children — simpler than space-* because it works in every direction without exceptions for the first/last item.
<div class="space-y-6 p-4">
<div class="flex flex-wrap gap-2">
<span class="rounded-full bg-indigo-100 px-3 py-1 text-xs text-indigo-700">Design</span>
<span class="rounded-full bg-indigo-100 px-3 py-1 text-xs text-indigo-700">Engineering</span>
<span class="rounded-full bg-indigo-100 px-3 py-1 text-xs text-indigo-700">Product</span>
<span class="rounded-full bg-indigo-100 px-3 py-1 text-xs text-indigo-700">Marketing</span>
</div>
<div class="grid grid-cols-3 gap-4">
<div class="h-12 rounded bg-slate-200"></div>
<div class="h-12 rounded bg-slate-200"></div>
<div class="h-12 rounded bg-slate-200"></div>
</div>
</div>