Tailwind Gap and Space Utilities to CSS

Gap vs Space Utilities in Tailwind

Tailwind offers two approaches to adding consistent spacing between child elements: gap-* for CSS Grid and Flexbox, and space-* which uses margin on child elements. Each approach has its own CSS implementation.

Gap Utilities (CSS Gap)

Gap classes use the native CSS gap property, which works in both Grid and Flexbox containers:

/* gap-4 */
gap: 1rem;

/* gap-x-4 (column gap only) */
column-gap: 1rem;

/* gap-y-2 (row gap only) */
row-gap: 0.5rem;

The advantage of gap is that it does not add spacing outside the container — only between children.

Space Utilities (Margin-based)

Space utilities work differently. They apply margin to children using the > * + * selector:

/* space-x-4 applies to children: */
> * + * {
  margin-left: 1rem;
}

/* space-y-2 applies to children: */
> * + * {
  margin-top: 0.5rem;
}

When to Use Each

• gap-*: Preferred for Grid and modern Flexbox layouts. Cleaner, no margin collapse issues.
• space-*: Useful in older browsers or when you need per-direction spacing without a flex/grid container.

Combining Gap with Grid

A common pattern is grid grid-cols-3 gap-4, which creates a 3-column grid with 1rem spacing:

display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;