PX to Tailwind Converter | Pixels to Tailwind CSS Units (Online)
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 PX to Tailwind Converter | Pixels to Tailwind CSS Units (Online)
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.
Formula for PX to Tailwind Converter | Pixels to Tailwind CSS Units (Online)
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]
Frequently Asked Questions for PX to Tailwind Converter | Pixels to Tailwind CSS Units (Online)
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.