PickCode- Home
- Free tools
- PX to REM converter with Tailwind classes
PX to REM converter with Tailwind classes
Type pixels, rem or a Tailwind step and the other two update. You also get the class to paste, including what changes between Tailwind v3 and v4.
1remp-4p-4p-4 (16px)text-baseSkip the conversion on real pages
PickCode copies any element as Tailwind and maps its pixel values to the default scale when they match. 5 free elements a day.
How the conversion works
Divide pixels by the root font size to get rem. Browsers default to a 16px root, so 24px is 1.5rem. A Tailwind spacing step is a quarter of a rem, so step 4 is 1rem and 16px.
rem = px / root
step = rem * 4
px = step * 0.25 * rootPX to REM table at a 16px root
| Pixels | Rem | Spacing class | Font size class |
|---|---|---|---|
| 1px | 0.0625rem | p-px | |
| 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 | p-3 | text-xs |
| 14px | 0.875rem | p-3.5 | text-sm |
| 16px | 1rem | p-4 | text-base |
| 18px | 1.125rem | p-4.5 (v4), p-[18px] (v3) | text-lg |
| 20px | 1.25rem | p-5 | text-xl |
| 24px | 1.5rem | p-6 | text-2xl |
| 28px | 1.75rem | p-7 | |
| 30px | 1.875rem | p-7.5 (v4), p-[30px] (v3) | text-3xl |
| 32px | 2rem | p-8 | |
| 36px | 2.25rem | p-9 | text-4xl |
| 40px | 2.5rem | p-10 | |
| 48px | 3rem | p-12 | text-5xl |
| 56px | 3.5rem | p-14 | |
| 60px | 3.75rem | p-15 (v4), p-[60px] (v3) | text-6xl |
| 64px | 4rem | p-16 | |
| 72px | 4.5rem | p-18 (v4), p-[72px] (v3) | text-7xl |
| 80px | 5rem | p-20 | |
| 96px | 6rem | p-24 | text-8xl |
| 128px | 8rem | p-32 | text-9xl |
Spacing classes use p- here. The same step works with m-, gap-, w- and h-. More on this in how Tailwind converts between px and rem.
What to know
- v3 and v4 differ
- Tailwind v3 has a fixed list of steps, so 18px needs
p-[18px]. Tailwind v4 accepts any multiple of 0.25, sop-4.5works. - Root size matters
- Tailwind's scale is in rem. If a site sets
html { font-size: 62.5% },p-4is 10px there. Set the root field to 10 to see it. - Font sizes included
- When a size matches the default scale you get its name, like
text-lgfor 18px. Those classes also set a line height. - Stays on your machine
- Everything is calculated in this tab. Nothing is uploaded.
Questions
How do I convert px to rem?
Divide the pixel value by the root font size. At the default 16px root, 24px / 16 = 1.5rem.
How many pixels is 1rem?
16px by default, because browsers ship with a 16px root font size. It changes if the user changes their browser font size or the site sets a size on the html element.
What is p-4 in pixels?
16px at the default root: 4 steps of 0.25rem is 1rem.
Should I use px or rem?
Use rem for font sizes and most spacing so they follow the user's font size setting. Keep px for things that should not scale, like 1px borders.
What does 62.5% do on the html element?
It makes the root 10px, so 1.6rem equals 16px. It makes the maths easier but shrinks every Tailwind class to 62.5% of its usual size, because Tailwind expects a 16px root.