Spacing and sizing

Spacing and sizes in Tailwind come from one scale with a step of 0.25rem. That is why the gap between blocks, the height of a button and the size of an icon fit together easily.

Padding and margin

p- is padding, m- is margin. Sides are picked with the letters t, r, b, l, x, y:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="bg-gray-100">
  <button class="ml-4 bg-indigo-600 px-4 py-2 text-white">Add to cart</button>
</div>

The button has 16 pixels of padding on the sides and 8 at the top and bottom, plus a 16-pixel margin on the left. mx-auto centers a block that has a set width.

Space between siblings

Instead of giving each element a margin, space-y- adds vertical space between direct children, and space-x- horizontal space:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="space-y-3">
  <p class="bg-indigo-50 p-2">Headphones</p>
  <p class="bg-indigo-50 p-2">Speaker</p>
  <p class="bg-indigo-50 p-2">Charger</p>
</div>

There are 12 pixels between the rows and none above the first or below the last. Inside flex and grid containers gap- is used instead — see the layout chapter.

Width and height

Fractions like w-1/3 and w-2/3 are handy for columns, size- for square icons and avatars.

Max width

A card should not stretch across the whole screen. max-w- limits the width with a named step: max-w-xs, max-w-sm, max-w-md and so on up to max-w-7xl:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="mx-auto max-w-sm bg-white p-6 shadow">
  <img src="/media/photo-400x250.jpg" alt="Headphones" class="h-40 w-full object-cover">
  <h2 class="mt-4 text-lg font-semibold">Wireless headphones</h2>
  <p class="mt-1 text-gray-600">$79</p>
</div>

The card is no wider than 24rem and sits in the center. The image takes the full width and a height of 10rem, and object-cover crops it without distorting the proportions.

Common mistake

Putting space-y- on a container whose items are not its direct children:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="space-y-4">
  <div>
    <p class="bg-rose-50 p-2">First</p>
    <p class="bg-rose-50 p-2">Second</p>
  </div>
</div>

The paragraphs stick together: the container has a single direct child — the wrapper — so there is nothing to put space between. Move space-y-4 to the block that holds the items, or use flexbox with gap-.