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: