/01 Pixels, rem and why the conversion matters
A rem is always measured against the root font size — the size set on the html element, which browsers default to 16px. So 24px equals 1.5rem at that default, but only 1.2rem if a user has bumped their browser text up to 20px. That is the whole point of rem: sizes scale with the reader's own setting instead of ignoring it.
Enter a pixel value and this converter gives you the rem equivalent instantly, and it works in reverse when you have a rem figure and need to know what it renders as. Change the root size and every result recalculates.
/02 Where to use rem and where px still wins
Font sizes, spacing, max-widths and media query breakpoints are all better in rem, because they respect the reader's zoom and accessibility settings. Borders, hairlines and anything that should stay physically crisp are usually fine left in px.
A common workflow is to design in pixels — because that is what design tools speak — then convert the values as you write the CSS. Doing it here keeps the arithmetic out of your head and out of your stylesheet.
/03 px to rem in Tailwind, Figma and everyday CSS
Design tools such as Figma measure everything in pixels, while good CSS sizes type and spacing in rem. Converting px to rem is dividing by the root font size, which is 16 pixels unless someone has changed it. The values you will use most are worth memorising: 12px is 0.75rem, 14px is 0.875rem, 18px is 1.125rem, 20px is 1.25rem, 24px is 1.5rem, 32px is 2rem, 40px is 2.5rem and 48px is 3rem.
Tailwind CSS is built on the same arithmetic. Its spacing scale moves in steps of 0.25rem, which is 4px at the default root, so p-4 is 1rem or 16px and gap-6 is 1.5rem or 24px. Font sizes follow rem as well: text-sm is 0.875rem and text-lg is 1.125rem. When a design hands you 20px of padding, that is 1.25rem, or p-5 in Tailwind.