CSS Units
- Free forever
- No sign-up
- Instant results
Tailwind to PX Converter
Convert a Tailwind spacing unit back to pixels. Useful for discussing sizes with designers or understanding what a utility class actually renders to on screen.
Pixel value
—
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 Tailwind → PX values
| Tailwind | Pixels | Example utilities |
|---|---|---|
| 0.5 | 2px | p-0.5, gap-0.5, mt-0.5 |
| 1 | 4px | p-1, gap-1, mt-1 |
| 1.5 | 6px | p-1.5, gap-1.5, mt-1.5 |
| 2 | 8px | p-2, gap-2, mt-2 |
| 2.5 | 10px | p-2.5, gap-2.5, mt-2.5 |
| 3 | 12px | p-3, gap-3, mt-3 |
| 4 | 16px | p-4, gap-4, mt-4 |
| 5 | 20px | p-5, gap-5, mt-5 |
| 6 | 24px | p-6, gap-6, mt-6 |
| 8 | 32px | p-8, gap-8, mt-8 |
| 10 | 40px | p-10, gap-10, mt-10 |
| 12 | 48px | p-12, gap-12, mt-12 |
| 16 | 64px | p-16, gap-16, mt-16 |