Tailwind Padding and Margin to CSS
Convert Tailwind padding (p-4, px-2, py-6) and margin (m-4, mx-auto, mt-8) classes to CSS. Learn the spacing scale that maps numbers to rem values.
Detailed Explanation
Tailwind Spacing Scale Explained
Tailwind's spacing utilities follow a consistent scale where each number maps to a multiple of 0.25rem (4px). Understanding this scale is fundamental because it is used across padding, margin, gap, width, height, and inset utilities.
The Spacing Scale
| Class Value | CSS Value |
|---|---|
| 0 | 0px |
| 0.5 | 0.125rem |
| 1 | 0.25rem |
| 2 | 0.5rem |
| 3 | 0.75rem |
| 4 | 1rem |
| 6 | 1.5rem |
| 8 | 2rem |
| 12 | 3rem |
| 16 | 4rem |
| 20 | 5rem |
| px | 1px |
Padding Classes
/* p-4 (all sides) */
padding: 1rem;
/* px-4 (horizontal: left + right) */
padding-left: 1rem;
padding-right: 1rem;
/* py-2 (vertical: top + bottom) */
padding-top: 0.5rem;
padding-bottom: 0.5rem;
/* pt-8 (top only) */
padding-top: 2rem;
Margin Classes
/* m-4 */
margin: 1rem;
/* mx-auto (center horizontally) */
margin-left: auto;
margin-right: auto;
/* mt-8 */
margin-top: 2rem;
/* -mt-4 (negative margin) */
margin-top: -1rem;
Negative Margins
Tailwind supports negative margins with a leading dash: -mt-4 produces margin-top: -1rem. Negative margins are useful for pulling elements outside their container or overlapping adjacent elements.
Use Case
Teams migrating from Tailwind to a custom design system who need to extract the exact pixel values from Tailwind's spacing scale, or developers learning Tailwind who want to see the CSS behind common spacing patterns like px-4 py-2 or mx-auto.