Roadmap Blog
refactoring
use of
how to create
when to use
mistakes to avoid
Tip 2/72

Spacing

Use TailwindCSS `space` and `gap` utilities to add spacing between elements

Adding spacing between elements is essential for clean and consistent layouts. TailwindCSS provides two main utilities for this purpose: gap-* and space-. While they might seem similar, each serves distinct use cases, and understanding when to use one over the other can significantly improve your workflow.

Using space- utilities

Instead of applying mt-* or mb-* (margin top/bottom) individually to elements within the same parent, the space- utilities (space-x-* and space-y-*) provide a cleaner and more efficient solution.

<div class="space-y-3">
    <div class="w-64 h-10 border"> </div>
    <div class="w-64 h-10 border"> </div>
    <div class="w-64 h-10 border"> </div>
</div>

Benefits:

  • Automatically adds spacing between all child elements.
  • No need to manage margins manually.
  • Ensures the spacing doesn’t affect the first or last child, which is helpful when dynamically rendering elements from an array.
  • In TailwindCSS v4, even when you apply space between elements using space-y-* or space-x-*, you can still apply custom margins to each element in the list using the margin utilities. This provides greater flexibility in styling individual elements while maintaining consistent spacing between them.

Common Misuse of gap

A common approach is to apply flex flex-col gap-* to align and space vertical elements. While this works, it’s better suited for layouts where flex or grid behavior is necessary.

<div class="flex flex-col gap-4">
    <div class="w-64 h-10 border"> </div>
    <div class="w-64 h-10 border"> </div>
    <div class="w-64 h-10 border"> </div>
</div>

This can be simplified using space-y-*, especially if there’s no need for the flex behavior:

<div class="space-y-4">
    <div class="w-64 h-10 border"> </div>
    <div class="w-64 h-10 border"> </div>
    <div class="w-64 h-10 border"> </div>
</div>

When to use gap

The gap-* utilities are most effective for flex or grid containers where you want spacing between items while preserving layout alignment.

<div class="grid gap-4 grid-cols-3">
    <div class="aspect-square rounded-2xl h-32 border"> </div>
    <div class="aspect-square rounded-2xl h-32 border"> </div>
    <div class="aspect-square rounded-2xl h-32 border"> </div>
</div>

Why gap works better here:

  • It evenly spaces elements within the grid or flex container.
  • Keeps the layout behavior intact without additional spacing utilities.

Combining gap-* and space- for Responsive Design

For more advanced layouts, you can combine gap-* and space- utilities to handle different screen sizes.

<div class="space-y-2 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-2">
    <div class="aspect-square h-32 rounded-2xl border"> </div>
    <div class="aspect-square h-32 rounded-2xl border"> </div>
    <div class="aspect-square h-32 rounded-2xl border"> </div>
</div>

Same Example without space :

<div class="grid gap-2 sm:grid-cols-3">
    <div class="aspect-square h-32 rounded-2xl border"></div>
    <div class="aspect-square h-32 rounded-2xl border"></div>
    <div class="aspect-square h-32 rounded-2xl border"></div>
</div>

Final Takeaway

  • Use space- utilities for simpler, vertical or horizontal spacing between stacked elements.
  • Use gap-* for flex or grid-based containers.
  • Combine them strategically for responsive and complex layouts.

By choosing the right utility for the right scenario, you’ll write cleaner, more maintainable code and make the most of TailwindCSS’s powerful spacing tools.