PX to REM, EM, Percentage & Tailwind Converter

CSS gives you several ways to express a size, and each one behaves differently depending on context: fixed pixels, root-relative rem, parent-relative em, and proportional percentages. Converting between them by hand means remembering which base value each unit depends on, and if you are working in a Tailwind project on top of that, translating a raw pixel value into the nearest spacing token adds another layer of lookup. This tool handles every direction of that conversion at once.

Why REM, EM, and percentage are not interchangeable

All three are relative units, but each is relative to something different. REM, root em, is always calculated relative to the root html element's font size, regardless of how deeply nested an element is in the document, which makes it predictable and is why most modern CSS resets and design systems default to rem for spacing and typography. EM is relative to the current element's own font size, or its parent's font size when used for a property like padding, which means em values compound as they nest inside other em-sized elements, a source of frequent, confusing bugs when em is used carelessly for layout. Percentage is relative to a containing property, most often the parent element's font size for typography, but it can mean something entirely different depending on the CSS property it is applied to, like width being relative to a parent's width rather than font size.

Why REM is generally the safer default

Because rem always traces back to a single root value, it scales predictably and respects a user's browser accessibility settings, someone who increases their browser's default font size for readability sees every rem-based measurement scale proportionally along with it, unlike a fixed pixel value which stays exactly the same regardless of that preference. This is the core reason most accessibility guidance recommends rem over px for font sizes specifically, and it is why this tool's base conversion defaults to a 16px root, the standard unconfigured browser default, while still letting you adjust it if your project sets a different root size.

Matching a design handoff to Tailwind's spacing scale

Tailwind's default spacing scale is built on a consistent 4px increment at the standard 16px root, so a design file specifying 24px of padding maps directly onto Tailwind's p-6 token, while an unusual value like 17px falls between tokens and has no exact match. The PX to Tailwind section here finds the closest token automatically, and tells you exactly how far off that token is from your target value, so you can decide whether to round to the nearest token for consistency with the rest of your design system, or use Tailwind's square bracket arbitrary value syntax, like p-[17px], when the exact pixel value genuinely matters for a specific piece of UI.

Adjusting the base and parent size

Not every project uses the browser default 16px root, some design systems deliberately set the root font size differently to make rem math cleaner elsewhere in their CSS. Both the root base size, used for REM conversions, and the parent font size, used for EM and percentage conversions, are editable here, so the tool's output matches your actual project setup rather than assuming the unconfigured browser default in every case.

Runs entirely in your browser

Every conversion here is simple arithmetic against your chosen base values, calculated instantly in your browser with nothing sent to a server. If you are pulling exact colors from a design file alongside your spacing values, our Color Format Converter and Image to Tailwind Palette generator round out the rest of a typical design handoff workflow, both part of the same Developer Utilities collection this tool belongs to.