Spacing & Sizing

Spacing is the foundation of good design. Tailwind's spacing scale makes it consistent and easy.

The Spacing Scale

Tailwind uses a consistent scale based on 0.25rem (4px):

Padding

Control inner spacing with padding utilities:

<!-- All sides -->
<div class="p-4">Padding all around</div>

<!-- Horizontal (left & right) -->
<div class="px-4">Padding left and right</div>

<!-- Vertical (top & bottom) -->
<div class="py-4">Padding top and bottom</div>

<!-- Individual sides -->
<div class="pt-4">Padding top only</div>
<div class="pr-4">Padding right only</div>
<div class="pb-4">Padding bottom only</div>
<div class="pl-4">Padding left only</div>

Margin

Control outer spacing with margin utilities:

<!-- All sides -->
<div class="m-4">Margin all around</div>

<!-- Auto margins for centering -->
<div class="mx-auto w-64">Centered horizontally</div>

<!-- Negative margins (useful for overlaps) -->
<div class="-mt-4">Pull up by 1rem</div>

Width

Control element width:

<!-- Fixed widths -->
<div class="w-32">128px wide</div>
<div class="w-64">256px wide</div>

<!-- Percentage widths -->
<div class="w-1/2">50% wide</div>
<div class="w-full">100% wide</div>

<!-- Max widths -->
<div class="max-w-md">Max 28rem</div>

Height

Control element height:

<!-- Fixed heights -->
<div class="h-16">64px tall</div>
<div class="h-32">128px tall</div>

<!-- Full height -->
<div class="h-full">100% of parent</div>
<div class="h-screen">100vh (full viewport)</div>

Space Between

For spacing children without margins:

<!-- Vertical spacing between children -->
<div class="space-y-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<!-- Horizontal spacing between children -->
<div class="flex space-x-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Practical Example: Dashboard Stats

Let's combine spacing utilities:

<div class="max-w-4xl mx-auto p-6">
  <h1 class="text-2xl font-bold mb-6">Dashboard</h1>
  <div class="grid grid-cols-3 gap-4">
    <div class="bg-white p-4 rounded-lg shadow">
      <div class="text-3xl font-bold">2,847</div>
      <div class="text-gray-500 text-sm mt-1">Total Users</div>
    </div>
    ...
  </div>
</div>

Key Takeaways

• Spacing scale: Multiply by 0.25rem (p-4 = 1rem = 16px)
• Directional: x = horizontal, y = vertical, t/r/b/l = individual sides
• Centering: Use mx-auto with a set width
• Percentages: Use fractions like w-1/2, w-2/3
• Space between: space-x- and space-y- for child spacing

Next, let's explore colors and typography!