Spacing

Tailwind Spacing

Tailwind's spacing scale uses multiples of 4px (0.25rem):

• p-1 = 4px, p-2 = 8px, p-4 = 16px, p-8 = 32px, p-16 = 64px

Padding shortcuts:

• p-4 — all sides
• px-4 — left and right (x-axis)
• py-4 — top and bottom (y-axis)
• pt-4, pr-4, pb-4, pl-4 — individual sides

Margin works the same:

• m-4, mx-auto (center), mt-4, etc.

Space between children:

• space-x-4 — horizontal gap between siblings
• space-y-4 — vertical gap between siblings

<div class="p-8 mx-auto">
  <div class="space-y-4">
    <div class="px-6 py-3">Item</div>
  </div>
</div>

Your Task

Create a container with padding, centered with mx-auto, and use space-y-4 on a list of items.