Tailwind to PX Converter
Convert Tailwind CSS spacing units to absolute pixels.
Tailwind ↔︎ PX Conversion Table
| Tailwind units | Pixels (px) | REM |
|---|---|---|
| 0.25 | 1px | 0.0625rem |
| 0.5 | 2px | 0.125rem |
| 1 | 4px | 0.25rem |
| 1.5 | 6px | 0.375rem |
| 2 | 8px | 0.5rem |
| 2.5 | 10px | 0.625rem |
| 3 | 12px | 0.75rem |
| 4 | 16px | 1rem |
| 5 | 20px | 1.25rem |
| 6 | 24px | 1.5rem |
| 8 | 32px | 2rem |
| 10 | 40px | 2.5rem |
| 12 | 48px | 3rem |
| 16 | 64px | 4rem |
| 20 | 80px | 5rem |
| 24 | 96px | 6rem |
| 32 | 128px | 8rem |
Understanding Tailwind Spacing
Tailwind CSS uses a numeric scale that represents fractional REM values. Specifically, 1 unit equals 0.25rem. On a standard 16px root font size, this means each unit is exactly 4 pixels. This linear scale makes it easy to calculate sizes mentally: simply multiply the Tailwind number by 4 to get the pixel equivalent.
Standard Formula
Examples
Frequency Asked Questions
What is the Tailwind unit to pixel ratio?
The ratio is 1:4. Every 1 unit in Tailwind equals 4 pixels.
Does Tailwind use REM or PX internally?
Tailwind's default configuration uses REM units for spacing. This is better for accessibility as it respects the user's browser font size settings. 1 unit is 0.25rem.
What if I want to use a value like 13px?
For values not in the standard spacing scale, use arbitrary values: class="w-[13px]".
Is the unit scale the same for width and height?
Yes, Tailwind uses the same spacing scale for margin, padding, width, height, gap, and more.