Spacing System
Our spacing and sizing system for widths, heights, margins, and padding.
| Name | Pixels | Preview |
|---|
| 0 | 0px | |
| px | 1px | |
| 0.5 | 2px | |
| 1 | 4px | |
| 1.5 | 6px | |
| 2 | 8px | |
| 2.5 | 10px | |
| 3 | 12px | |
| 3.5 | 14px | |
| 4 | 16px | |
| 5 | 20px | |
| 6 | 24px | |
| 7 | 28px | |
| 8 | 32px | |
| 9 | 36px | |
| 10 | 40px | |
| 12 | 48px | |
| 14 | 56px | |
| 16 | 64px | |
| 20 | 80px | |
| 24 | 96px | |
| 28 | 112px | |
| 32 | 128px | |
| 36 | 144px | |
| 40 | 160px | |
| 44 | 176px | |
| 48 | 192px | |
| 52 | 208px | |
| 56 | 224px | |
| 60 | 240px | |
| 64 | 256px | |
| 72 | 288px | |
| 80 | 320px | |
| 96 | 384px | |
Max-Width & Max-Height sizes
| Max-Width | Max-Height | Pixels |
|---|
| max-w-0 | max-h-0 | 0px |
| max-w-xs | max-h-xs | 320px |
| max-w-sm | max-h-sm | 384px |
| max-w-md | max-h-md | 448px |
| max-w-lg | max-h-lg | 512px |
| max-w-xl | max-h-xl | 576px |
| max-w-2xl | max-h-2xl | 672px |
| max-w-3xl | max-h-3xl | 768px |
| max-w-4xl | max-h-4xl | 896px |
| max-w-5xl | max-h-5xl | 1024px |
| max-w-6xl | max-h-6xl | 1152px |
| max-w-7xl | max-h-7xl | 1280px |