px to rem converter
Convert px to rem and back at any root size, map sizes to Tailwind v4 utilities, and convert a whole stylesheet in one paste. Free, no sign up, runs in the browser.
20px ÷ 16 = 1.25rem · Tailwind spacing p-5 · text size text-xl
| px | rem | Tailwind spacing | Tailwind text size |
|---|---|---|---|
| 4px | 0.25rem | p-1 · gap-1 · w-1 | text-[4px] (near text-xs) |
| 6px | 0.375rem | p-1.5 · gap-1.5 · w-1.5 | text-[6px] (near text-xs) |
| 8px | 0.5rem | p-2 · gap-2 · w-2 | text-[8px] (near text-xs) |
| 10px | 0.625rem | p-2.5 · gap-2.5 · w-2.5 | text-[10px] (near text-xs) |
| 12px | 0.75rem | p-3 · gap-3 · w-3 | text-xs |
| 14px | 0.875rem | p-3.5 · gap-3.5 · w-3.5 | text-sm |
| 16px | 1rem | p-4 · gap-4 · w-4 | text-base |
| 18px | 1.125rem | p-4.5 · gap-4.5 · w-4.5 | text-lg |
| 20px | 1.25rem | p-5 · gap-5 · w-5 | text-xl |
| 24px | 1.5rem | p-6 · gap-6 · w-6 | text-2xl |
| 28px | 1.75rem | p-7 · gap-7 · w-7 | text-[28px] (near text-3xl) |
| 32px | 2rem | p-8 · gap-8 · w-8 | text-[32px] (near text-3xl) |
| 36px | 2.25rem | p-9 · gap-9 · w-9 | text-4xl |
| 40px | 2.5rem | p-10 · gap-10 · w-10 | text-[40px] (near text-4xl) |
| 48px | 3rem | p-12 · gap-12 · w-12 | text-5xl |
| 56px | 3.5rem | p-14 · gap-14 · w-14 | text-[56px] (near text-6xl) |
| 64px | 4rem | p-16 · gap-16 · w-16 | text-[64px] (near text-6xl) |
| 72px | 4.5rem | p-18 · gap-18 · w-18 | text-7xl |
| 80px | 5rem | p-20 · gap-20 · w-20 | text-[80px] (near text-7xl) |
| 96px | 6rem | p-24 · gap-24 · w-24 | text-8xl |
Converted 12 values, kept 1 thin border in px.
Every px value becomes rem.
.card {
padding: 1.5rem 1.25rem;
border: 1px solid #e5e7eb;
border-radius: 0.75rem;
font-size: 0.875rem;
line-height: 1.25rem;
box-shadow: 0 0.0625rem 0.125rem rgb(0 0 0 / 0.06);
}
.card h2 {
margin: 0 0 0.5rem;
font-size: 1.125rem;
letter-spacing: -0.0125rem;
}
@media (min-width: 48rem) {
.card { padding: 2rem; }
}
How to use it
- 1Type a value in the px or rem field; the other updates, with the Tailwind utility for that size.
- 2Change the root font size if your project does not use 16px.
- 3Paste a stylesheet in the batch box to convert every px value, keeping 1px borders if you want.
- 4Copy the converted CSS.
The formula
One rem is the font size of the root element, which browsers set to 16px unless the user changes it. So rem = px / 16 and px = rem × 16: 24px is 1.5rem, 14px is 0.875rem, 13px is 0.8125rem. The root size field exists for projects that set html { font-size } to something else, but the common 62.5% trick, which makes 1rem equal 10px, is best avoided: it breaks third party CSS that assumes 16 and makes every value in your own code lie about its size.
/* 16px root */
font-size: 0.875rem; /* 14px */
padding: 1.5rem 1.25rem; /* 24px 20px */
max-width: 45rem; /* 720px */
Rem is right for type, spacing, widths and breakpoints, because all of them should grow when someone raises their default font size. A few things should not scale: 1px borders and dividers, which turn into blurry 1.2px lines at larger roots, and small shadows and outlines. That is what the border toggle in the batch converter protects. Letter spacing is better in em, relative to the text it tracks, and 0px is simply 0.
Tailwind CSS v4 and rem
Tailwind's spacing scale is --spacing: 0.25rem, and any multiple of it is a valid utility: p-4 is 1rem, gap-1.5 is 0.375rem and mt-3.25 is 0.8125rem. A value that is not a multiple of 0.25rem, such as 13px, needs an arbitrary value like p-[13px]. Text sizes are a fixed list from text-xs (0.75rem) to text-9xl (8rem), and the table shows the nearest one when your size is between steps. Breakpoints in v4 are rem too, so @media (min-width: 768px) becomes 48rem, which is what the batch converter writes.
What the batch converter does
It finds every number followed by px in the pasted text, divides by the root size, rounds to the precision you set and drops trailing zeros. Values of 1px or less inside border and outline declarations are left alone while the toggle is on. Nothing is parsed beyond that, so values inside comments and url() strings are converted too; read the result once before committing it.
Frequently asked questions
Why use rem instead of px?
Users who raise the default font size in their browser get larger text and spacing when values are in rem. Pixel values ignore that setting, although page zoom still scales them.
Is 1rem always 16px?
By default, yes. It changes if the page sets a font size on html or the user picks a different default in browser settings, which is the point of using it.
Does Tailwind use rem?
Yes. Spacing, text sizes, radii and breakpoints in Tailwind CSS v4 are all defined in rem, so px values from a design file need converting to find the matching utility.