PX to REM Converter
Convert px to rem and back at any root font size, see the matching Tailwind spacing and text size, and copy values from a conversion table.
Convert
Tailwind CSS
- Spacing step
- 6 (p-6, gap-6, w-6)
- Font size
- text-2xl
Tailwind v4 spacing is 0.25rem per step, so p-6 is 1.5rem (24px at a 16px root).
Code
font-size: 1.5rem; /* 24px */
Conversion table (root 16px)
| px | rem | Tailwind |
|---|---|---|
| 1px | 0.0625rem | – |
| 2px | 0.125rem | p-0.5 |
| 4px | 0.25rem | p-1 |
| 6px | 0.375rem | p-1.5 |
| 8px | 0.5rem | p-2 |
| 10px | 0.625rem | p-2.5 |
| 12px | 0.75rem | text-xs |
| 14px | 0.875rem | text-sm |
| 16px | 1rem | text-base |
| 18px | 1.125rem | text-lg |
| 20px | 1.25rem | text-xl |
| 24px | 1.5rem | text-2xl |
| 28px | 1.75rem | p-7 |
| 32px | 2rem | p-8 |
| 36px | 2.25rem | text-4xl |
| 40px | 2.5rem | p-10 |
| 44px | 2.75rem | p-11 |
| 48px | 3rem | text-5xl |
| 56px | 3.5rem | p-14 |
| 64px | 4rem | p-16 |
| 72px | 4.5rem | text-7xl |
| 80px | 5rem | p-20 |
| 96px | 6rem | text-8xl |
| 128px | 8rem | text-9xl |
Click a row to copy its rem value.
About the PX to REM Converter
PX to REM Converter turns pixels into rem and rem into pixels at any root font size, shows the matching Tailwind CSS spacing step and text size, and includes a conversion table for common values.
When to use it
Use it when turning a Figma design measured in pixels into accessible, scalable CSS, or when you need to know which Tailwind class matches a size.
How to use the PX to REM Converter
- 1Type a value in pixels or in rem; the other field updates as you type.
- 2Change the root font size if your site doesn't use the browser default of 16px.
- 3See the matching Tailwind spacing step and text size.
- 4Copy the CSS, or click any row in the conversion table to copy its rem value.
PX to REM Converter FAQ
- How do I convert px to rem?
- Divide the pixel value by the root font size. With the default 16px root, 24px ÷ 16 = 1.5rem and 14px ÷ 16 = 0.875rem.
- Why use rem instead of px?
- rem scales with the user's browser font size setting, so people who need bigger text get it across your whole layout. That makes rem the more accessible choice for font sizes and spacing.
- What is 1rem in pixels?
- 1rem equals the root (html) font size, which is 16px in every major browser unless the user or your CSS changes it.
- How does this map to Tailwind CSS?
- In Tailwind v4 one spacing step is 0.25rem, so p-4 is 1rem (16px) and p-6 is 1.5rem (24px). Font sizes use names like text-base (1rem) and text-2xl (1.5rem).
More free tools
All tools →CSS Gradient Generator
Linear, radial and conic gradients with up to five color stops.
Box Shadow Generator
Layered shadows with a live light and dark preview.
Glassmorphism Generator
Frosted glass cards with backdrop blur and saturation.
Border Radius Generator
Organic blob shapes by dragging, or simple rounded corners.
CSS clamp() Calculator
Fluid type that scales smoothly between two screen widths.
Easing Curve Editor
Drag a cubic-bezier curve and watch it move.