Tailwind CSS Spacing Utilities
Complete reference for Tailwind CSS v4.1 spacing utilities: margin, padding, and space-between.
Quick Reference
Margin Classes
- m-{size}: All sides margin
- mx-{size}: Horizontal (left + right)
- my-{size}: Vertical (top + bottom)
- mt-{size}: Top margin
- mr-{size}: Right margin
- mb-{size}: Bottom margin
- ml-{size}: Left margin
- -m-{size}: Negative margin
- m-auto: Auto margin (centering)
Padding Classes
- p-{size}: All sides padding
- px-{size}: Horizontal (left + right)
- py-{size}: Vertical (top + bottom)
- pt-{size}: Top padding
- pr-{size}: Right padding
- pb-{size}: Bottom padding
- pl-{size}: Left padding
Space Between Children
- space-x-{size}: Horizontal spacing between flex/grid children
- space-y-{size}: Vertical spacing between flex/grid children
Spacing Scale
Tailwind CSS v4.1 uses a configurable spacing scale where --spacing is the base unit (default: 0.25rem/4px).
| Class | Value | |-------|-------| | 0 | 0 | | px | 1px | | 0.5 | calc(var(--spacing) 2) = 0.5rem | | 1 | calc(var(--spacing) 4) = 1rem | | 2 | calc(var(--spacing) 8) = 2rem | | 3 | calc(var(--spacing) 12) = 3rem | | 4 | calc(var(--spacing) 16) = 4rem | | 6 | calc(var(--spacing) 24) = 6rem | | 8 | calc(var(--spacing) 32) = 8rem | | 12 | calc(var(--spacing) 48) = 12rem | | 16 | calc(var(--spacing) * 64) = 16rem |
Common Patterns
Centered Container
<div class="mx-auto">Centered content</div>Card with Padding
<div class="p-6 bg-white rounded-lg shadow">Card content</div>Flex Items with Spacing
<div class="flex space-x-4">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>Stack with Vertical Spacing
<div class="space-y-4">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
</div>See detailed references:
- [Margin utilities →](./references/margin.md)
- [Padding utilities →](./references/padding.md)