# Spacing

Tailwind spacing multiplies one unit, `--spacing` (4px). `p-3` is 3 × 4px.

| Name | CSS var | Tailwind | Light | Dark | Description |
| --- | --- | --- | --- | --- | --- |
| --spacing | `--spacing` |  | `4px` | `4px` | Spacing unit. Tailwind multiplies it, so p-3 = 3 × --spacing. |

## Steps

| Step | Tailwind | Value |
| --- | --- | --- |
| 0 | `p-0` | 0px |
| 0.5 | `p-0.5` | 2px |
| 1 | `p-1` | 4px |
| 1.5 | `p-1.5` | 6px |
| 2 | `p-2` | 8px |
| 2.5 | `p-2.5` | 10px |
| 3 | `p-3` | 12px |
| 4 | `p-4` | 16px |
| 5 | `p-5` | 20px |
| 6 | `p-6` | 24px |
| 8 | `p-8` | 32px |
| 10 | `p-10` | 40px |
| 12 | `p-12` | 48px |
| 16 | `p-16` | 64px |
| 20 | `p-20` | 80px |
| 24 | `p-24` | 96px |
| 32 | `p-32` | 128px |