The space-x and space-y utilities add consistent spacing between child elements. They work by applying margin to all children except the first one, creating even gaps without extra markup.
Basic usage
<!-- Vertical spacing between stacked items -->
<div class="space-y-4">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
<!-- Horizontal spacing between inline items -->
<div class="flex space-x-4">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
How it works
When you use space-y-4, Tailwind applies margin-top: 1rem to every child except the first. This means the first element stays flush while the rest get consistent spacing above them.
/* What Tailwind generates */
.space-y-4 > * + * {
margin-top: 1rem;
}
Spacing with reverse direction
If you need spacing from the bottom up instead, use the space-y-reverse modifier.
<div class="flex flex-col-reverse space-y-reverse space-y-4">
<div>Now this item gets spacing below</div>
<div>Middle item</div>
<div>First item — no spacing</div>
</div>