PX to Tailwind Converter
Convert absolute pixels to Tailwind CSS spacing units (base-4 scale).
PX ↔︎ Tailwind Conversion Table
| Pixels (px) | Tailwind units | REM |
|---|---|---|
| 1px | 0.25 | 0.0625rem |
| 2px | 0.5 | 0.125rem |
| 4px | 1 | 0.25rem |
| 6px | 1.5 | 0.375rem |
| 8px | 2 | 0.5rem |
| 10px | 2.5 | 0.625rem |
| 12px | 3 | 0.75rem |
| 14px | 3.5 | 0.875rem |
| 16px | 4 | 1rem |
| 20px | 5 | 1.25rem |
| 24px | 6 | 1.5rem |
| 32px | 8 | 2rem |
| 40px | 10 | 2.5rem |
| 48px | 12 | 3rem |
| 64px | 16 | 4rem |
| 80px | 20 | 5rem |
| 100px | 25 | 6.25rem |
About Tailwind Unit Conversion
Tailwind CSS uses a numeric scale for its spacing and sizing utilities (like m-4, p-2, w-64). By default, this scale is proportional. 1 unit is equal to 0.25rem, which translates to 4px in most modern browsers. This converter helps you quickly find the equivalent Tailwind unit for a specific pixel value, ensuring your designs remain consistent with the Tailwind design system.
Standard Formula
Examples
Reference
- • Default spacing scale: 1 unit = 4px (0.25rem)
- • p-1 translates to padding: 0.25rem (4px)
- • w-full occupies 100% of the parent width
- • h-screen occupies 100% of the viewport height
- • Custom values can be used with brackets: w-[13px]
Frequency Asked Questions
What is 1 Tailwind unit in pixels?
By default, 1 Tailwind unit is equal to 4 pixels (0.25rem).
How do I use a specific pixel value in Tailwind?
If a value isn't on the standard scale, you can use square brackets: class="w-[13px]" or "m-[7px]".
Why does Tailwind use a 4px scale?
A 4px or 8px grid is a standard in UI design. It creates consistent spacing and balance throughout an application, making layouts look more professional and organized.
Does this apply to all Tailwind versions?
Yes, the default spacing scale (1 unit = 4px) has been consistent across Tailwind CSS v1, v2, and v3.