Tailwind CSS - Space Between

Tailwind CSS - Space Between

The space-* utilities provide a powerful way to add consistent spacing between child elements. Instead of adding margins to each child, you apply a single space-* utility to the parent container.

How It Works

Under the hood, Tailwind uses the “lobotomized owl” selector (* + *) to add margins to all child elements except the first one. This ensures that you get gaps between elements without adding unwanted space before the first element or after the last one.

Space Between Utilities

These utilities control the space between child elements along the horizontal or vertical axis.

Class	Description
space-x-{size}	Adds horizontal space between child elements. For example, space-x-4 adds 1rem of left margin to all but the first child.
space-y-{size}	Adds vertical space between child elements. For example, space-y-4 adds 1rem of top margin to all but the first child.
space-x-reverse	Reverses the direction of horizontal spacing. Used with flex-row-reverse to ensure margin is added to the correct side.
space-y-reverse	Reverses the direction of vertical spacing. Used with flex-col-reverse.

Note: The {size} corresponds to Tailwind’s spacing scale (e.g., 0, 0.5, 1, 1.5, …, px).

Practical Examples

Example: Horizontal and Vertical Spacing

<div class="p-8 bg-slate-100 space-y-8">
  <!-- Horizontal Spacing with space-x-4 -->
  <div>
    <h3 class="font-semibold mb-2">Horizontal Nav Menu (`space-x-4`)</h3>
    <div class="flex">
      <div class="flex space-x-4 bg-white p-4 rounded-lg shadow">
        <a href="#" class="px-3 py-2 text-slate-700 rounded-lg hover:bg-slate-100">Home</a>
        <a href="#" class="px-3 py-2 text-slate-700 rounded-lg hover:bg-slate-100">About</a>
        <a href="#" class="px-3 py-2 text-slate-700 rounded-lg hover:bg-slate-100">Projects</a>
        <a href="#" class="px-3 py-2 text-slate-700 rounded-lg hover:bg-slate-100">Contact</a>
      </div>
    </div>
  </div>

  <!-- Vertical Spacing with space-y-4 -->
  <div>
    <h3 class="font-semibold mb-2">Vertical List (`space-y-4`)</h3>
    <div class="flex flex-col space-y-4 max-w-sm">
      <div class="bg-white p-4 rounded-lg shadow">Item 1</div>
      <div class="bg-white p-4 rounded-lg shadow">Item 2</div>
      <div class="bg-white p-4 rounded-lg shadow">Item 3</div>
    </div>
  </div>
</div>

Example: Handling Reversed Order

When you reverse the order of elements using flex-row-reverse, the space-x-* utility would incorrectly add margin-left. To fix this, you add the space-x-reverse class, which tells Tailwind to apply margin-right instead.

<!-- This container lays out items from right to left -->
<div class="flex flex-row-reverse space-x-4 space-x-reverse bg-white p-4 rounded-lg shadow">
  <div class="w-16 h-16 rounded-lg bg-rose-500 flex items-center justify-center text-white">1</div>
  <div class="w-16 h-16 rounded-lg bg-rose-500 flex items-center justify-center text-white">2</div>
  <div class="w-16 h-16 rounded-lg bg-rose-500 flex items-center justify-center text-white">3</div>
</div>

Modern Alternative: gap

For Flexbox and Grid layouts, the gap-* utilities are now the recommended way to add space between elements. They are often simpler and more predictable.

When to use space-* vs. gap-*

• Use gap-* for any flex or grid container. It’s the modern standard, doesn’t add outer margins, and correctly handles wrapping elements.
• Use space-* when you are not using flex or grid, but still want to space out a list of sibling elements. It’s also useful for adding dividers between elements, as shown in the next section.

Combining with Dividers

The space-* utilities work perfectly with the divide-* utilities to add a border between child elements.

<div class="flex flex-col space-y-4 divide-y divide-slate-200 max-w-sm">
  <div class="pt-4">User Profile</div>
  <div class="pt-4">Billing Information</div>
  <div class="pt-4">Security Settings</div>
  <div class="pt-4">Notifications</div>
</div>