CSS Units
- Free forever
- No sign-up
- Instant results
PX to Tailwind Converter
Convert any pixel value to its Tailwind CSS spacing unit. Tailwind's scale is base-4, so this tool does the division and snaps to the nearest valid unit for you.
Tailwind spacing unit
—
When would you use this?
The reverse of the Tailwind converter. Useful when you're reading someone else's Tailwind code and need to visualize the actual dimensions, or when you're discussing sizes with a designer who works in pixels. Enter the Tailwind unit number and see the exact pixel equivalent.
Common PX → Tailwind values
| Pixels | Tailwind | Example utilities |
|---|---|---|
| 2px | 0.5 | p-0.5, gap-0.5, mt-0.5 |
| 4px | 1 | p-1, gap-1, mt-1 |
| 6px | 1.5 | p-1.5, gap-1.5, mt-1.5 |
| 8px | 2 | p-2, gap-2, mt-2 |
| 10px | 2.5 | p-2.5, gap-2.5, mt-2.5 |
| 12px | 3 | p-3, gap-3, mt-3 |
| 16px | 4 | p-4, gap-4, mt-4 |
| 20px | 5 | p-5, gap-5, mt-5 |
| 24px | 6 | p-6, gap-6, mt-6 |
| 32px | 8 | p-8, gap-8, mt-8 |
| 40px | 10 | p-10, gap-10, mt-10 |
| 48px | 12 | p-12, gap-12, mt-12 |
| 64px | 16 | p-16, gap-16, mt-16 |