Spacing (Margin & Padding)
Tailwind provides a comprehensive, fixed spacing scale based on a 4px (0.25rem) ratio.
The Tailwind Spacing Scale
| Tailwind Unit | Pixels | REM Value | CSS Output Example |
|---|---|---|---|
0.5 | 2px | 0.125rem | padding: 0.125rem; |
1 | 4px | 0.25rem | padding: 0.25rem; |
2 | 8px | 0.5rem | padding: 0.5rem; |
4 | 16px | 1rem | padding: 1rem; |
6 | 24px | 1.5rem | padding: 1.5rem; |
8 | 32px | 2rem | padding: 2rem; |
12 | 48px | 3rem | padding: 3rem; |
16 | 64px | 4rem | padding: 4rem; |
Margin & Padding Directions
Padding Utilities (`p-*`)
p-4: Padding on all sidespx-6: Horizontal padding (left & right)py-3: Vertical padding (top & bottom)pt-2: Padding toppr-4: Padding rightpb-2: Padding bottompl-4: Padding left
Margin Utilities (`m-*`)
m-4: Margin on all sidesmx-auto: Horizontal centering (`margin-left: auto; margin-right: auto;`)my-5: Vertical marginmt-8: Margin topmb-4: Margin bottom-mt-4: Negative margin top (-16px)
Space Between Children (`space-x` / `space-y`)
Instead of adding margin to every child element individually, use space-x-{amount} or space-y-{amount} on the parent container!
Live Demo: `space-x-4`
<div className="flex space-x-4"> <button className="bg-blue-500 text-white px-4 py-2 rounded">Button 1</button> <button className="bg-emerald-500 text-white px-4 py-2 rounded">Button 2</button> <button className="bg-purple-500 text-white px-4 py-2 rounded">Button 3</button> </div>
Next Up
Learn width, height, min/max dimensions, and viewport sizing.
Next Lesson: Sizing (Width & Height) →
