REM to PX converter

Common rem values at the browser default. The tool above recalculates the same table for any root size.

Tailwind's spacing utilities (p-*, m-*, gap-*, w-*, h-*, inset-*) use steps of 0.25rem, which is 4px at a 16px root. So the class number times 4 gives the pixels. In v4 this comes from one --spacing: 0.25rem variable and any multiple of 0.25 works (p-13, mt-4.5); v3 ships the fixed list below.

Each text class also sets a matching line-height. If you change the root font size, every value in both tables scales with it.

px = rem × root font size

1.5rem   × 16 = 24px
0.875rem × 16 = 14px
2.4rem   × 10 = 24px   (html { font-size: 62.5%; })

JavaScript, with the root size the page really uses:

const root = parseFloat(getComputedStyle(document.documentElement).fontSize);
const remToPx = rem => rem * root;
remToPx(1.5); // 24 at a 16px root

Inside CSS you rarely need the px number: calc(1.5rem + 2px) mixes the two units and the browser resolves it. To check what an element ends up with, the Computed tab in DevTools lists every length in px.

• The site sets the root. html { font-size: 62.5% } gives a 10px root, so a design file's 24px is 2.4rem in the CSS. Paste such a value with root 10 to get the pixels back.
• The reader sets the default. Browsers let people pick a larger default text size. With 20px as the default, 1rem is 20px on sites that do not override it, which is the point of using rem.
• Media queries use the default, not the root. @media (min-width: 40rem) is 640px with a 16px default, even when html sets 10px.
• em is not rem. 1.5em inside a 20px element is 30px. Only rem always points at the root.

Going the other way? The PX to REM converter divides instead, and its bulk mode turns a whole px stylesheet into rem. For colors, use the color converter, and see Tailwind CSS tools on DevHunt.