BrowserTools

PX to REM Converter

Convert pixels to rem units & Tailwind classes

By Guga — BrowserTools maintainer, Tbilisi, Georgia Updated 2026-09-25
Free Private No uploads
What is PX to REM Converter?

Two large number fields sit side by side and drive each other. Type a pixel value and the rem field is recomputed as that number divided by the root size; type a rem value and the pixel field becomes the corresponding multiple. The root size is a control in its own right rather than a hard-coded 16, with 14, 16 and 10 presets, because a project that sets html to 14px or a browser preference that overrides the default makes the standard figure wrong. The rem result is rounded to four decimal places and the pixel-back result to two, with trailing zeros stripped, so 24 produces 1.5rem rather than 1.5000rem. A CSS rule panel prints the font-size declaration with the pixel value kept as a trailing comment, and a fifteen-row table lines the common pixel steps up against their rem equivalents and the Tailwind utility that matches.

Instantly convert pixels (px) to CSS root units (rem) and vice-versa. Customize root HTML font size, view CSS snippet rules, and consult the visual Tailwind size reference table.

Private PX to REM Converter In Your Browser

PX to REM Converter is processed locally with client-side JavaScript. Your files never touch a server, and there is no queue to wait in.

Step-by-Step

How to use PX to REM Converter

1

Set the Root / HTML Base Font Size with the number field, or press the 14px, 16px or 10px preset buttons beside it.

2

Type into the Pixels (PX) field to fill in Rem Units (REM), or type into Rem Units to fill in Pixels; the other field follows.

3

Press Copy CSS to take the font-size declaration, which carries the pixel value along as a comment.

4

Read the reference table for the common pixel steps, each with its rem value, its Tailwind class and a per-row copy button.

Key Capabilities
  • The root font size is a first-class control with 14, 16 and 10 presets, so the conversion is not locked to the browser default.
  • The two fields are genuinely two-way: typing into either one recomputes the other from the same base size.
  • Rem results are trimmed to four decimal places and pixel results to two, with trailing zeros removed before they are shown.
  • The reference table covers fifteen pixel steps from 8 to 96, each with its rem value, the nearest Tailwind utility and its own copy button.
Common Use Cases
  • A developer porting a pixel-based stylesheet to rem types each value once and copies the rule rather than dividing by sixteen each time.
  • Someone on a project that sets html to 14px changes the root field and re-reads the reference table against the real base.
  • A designer matching a Tailwind spacing scale reads the table to see which utility corresponds to a 28px value in a comp.
Clear Answers

Frequently Asked Questions

Why is the base size editable?
Because 16 is only a default. A project can set the html font-size to 14px, a browser's minimum-font setting can change the effective root, and a design system may run on a fluid or percentage root. Leave the field at 16 in any of those cases and the arithmetic is quietly wrong.
What about em instead of rem?
em resolves against the font size of the element it appears on, so it compounds down a tree and a nested value can quietly mean something different from what you intended. rem always resolves against the root, which is why type scales and spacing systems are usually built on it.
Are the Tailwind entries in the table exact conversions?
They are the closest default utility for each pixel step rather than a computed equivalent. Tailwind's spacing scale is defined in rem against its own base, and several rows pair a text-size class for type with a padding class for spacing, so treat that column as a lookup rather than a formula.
Does the rounding cause a problem?
Not in practice. Four decimal places on the rem figure and two on the pixel figure sit far below anything a screen can resolve, and the underlying arithmetic is exact up to those digits — nothing here is looked up in a table or cached between runs.

Related Guides

View all guides →
webdevPX vs REM vs EM: Which Unit Belongs Wherepx ignores the font size a reader has set, rem follows the root element, and em follows the parent, so nesting em compounds while rem never surprises you. That single difference is the whole accessibility case for font-size guidance, and it is what decides where each unit belongs in a layout. The rule of thumb, the arithmetic and the traps are below; to convert one specific value, the PX to REM converter linked from this guide does it instantly.