Developer Tools
PX to Tailwind Converter
Convert your design pixels to the Tailwind CSS spacing scale instantly. Find exact matches or the closest available utility class.
Exact Match
0
Tailwind spacing (0px)
Tailwind uses a spacing scale where 1 unit = 0.25rem = 4px (with default 16px base).
Standard Tailwind Spacing Chart
| Tailwind Class | REM | Pixels (16px base) |
|---|---|---|
| spacing-1 | 0.25rem | 4px |
| spacing-4 | 1rem | 16px |
| spacing-8 | 2rem | 32px |
| spacing-16 | 4rem | 64px |
| spacing-64 | 16rem | 256px |
Tailwind Spacing FAQs
How does Tailwind spacing relate to pixels?
By default, 1 Tailwind spacing unit equals 0.25rem (4px). For example, w-4 is 1rem (16px) and w-64 is 16rem (256px).
How many pixels is Tailwind w-64?
Tailwind w-64 is equal to 16rem. With a standard 16px base font size, w-64 is 256 pixels.
Can I use custom spacing in Tailwind?
Yes. If a value isn't on the standard scale, you can use arbitrary values like w-[123px] or extend your tailwind.config.js.
Why use the Tailwind spacing scale?
Sticking to a predefined spacing scale ensures visual consistency across your layout and prevents 'value creep' where multiple similar but different pixel values are used.