PX to REM Converter
Type a pixel or rem value and get the other unit plus the Tailwind spacing class that matches it. Click any row in the reference tables to load it.
24px is on Tailwind's spacing scale (1 unit = 4px), so any spacing utility works: p-6, m-6, gap-6, w-6.
Spacing scale
| Class suffix | rem | px |
|---|---|---|
| 0.5 | 0.125rem | 2px |
| 1 | 0.25rem | 4px |
| 1.5 | 0.375rem | 6px |
| 2 | 0.5rem | 8px |
| 2.5 | 0.625rem | 10px |
| 3 | 0.75rem | 12px |
| 3.5 | 0.875rem | 14px |
| 4 | 1rem | 16px |
| 5 | 1.25rem | 20px |
| 6 | 1.5rem | 24px |
| 7 | 1.75rem | 28px |
| 8 | 2rem | 32px |
| 9 | 2.25rem | 36px |
| 10 | 2.5rem | 40px |
| 11 | 2.75rem | 44px |
| 12 | 3rem | 48px |
| 14 | 3.5rem | 56px |
| 16 | 4rem | 64px |
| 20 | 5rem | 80px |
| 24 | 6rem | 96px |
| 28 | 7rem | 112px |
| 32 | 8rem | 128px |
| 36 | 9rem | 144px |
| 40 | 10rem | 160px |
| 44 | 11rem | 176px |
| 48 | 12rem | 192px |
| 52 | 13rem | 208px |
| 56 | 14rem | 224px |
| 60 | 15rem | 240px |
| 64 | 16rem | 256px |
| 72 | 18rem | 288px |
| 80 | 20rem | 320px |
| 96 | 24rem | 384px |
Font sizes
| Class | rem | px |
|---|---|---|
| text-xs | 0.75rem | 12px |
| text-sm | 0.875rem | 14px |
| text-base | 1rem | 16px |
| text-lg | 1.125rem | 18px |
| text-xl | 1.25rem | 20px |
| text-2xl | 1.5rem | 24px |
| text-3xl | 1.875rem | 30px |
| text-4xl | 2.25rem | 36px |
| text-5xl | 3rem | 48px |
| text-6xl | 3.75rem | 60px |
| text-7xl | 4.5rem | 72px |
| text-8xl | 6rem | 96px |
| text-9xl | 8rem | 128px |
Frequently asked questions
How many pixels is 1 unit in Tailwind spacing?
One unit is 0.25rem, which is 4px at the default 16px base font size. So p-4 is 16px, p-8 is 32px, and p-0.5 is 2px.
How do I convert px to rem?
Divide the pixel value by the base font size. With the browser default of 16px, 24px is 24 / 16 = 1.5rem.
What is p-px in Tailwind?
p-px is exactly 1 pixel of padding. The same px suffix works for margin, width, height, gap and borders.
Why use rem instead of px?
rem scales with the user's browser font size setting, which keeps layouts readable for people who increase their default text size. Tailwind's spacing and text sizes are rem-based for that reason.
Guides that go with this tool
More free Tailwind CSS tools
More free tools & components
Keep going with another tool, or grab a ready-made component.