Darnly
Free tools

px to rem converter, with Tailwind classes

Type a size in px and get the rem value, the matching Tailwind class and a ruler at real size. Works both ways, with any base font size.

24px
Tailwind
24px
Aa

Shown at real size · base 16px

px
rem
px
Common sizes: px, rem and Tailwind

At a base of 16px. Click a row to see it above.

pxremSpacingText
Convert a block of CSS
Make a Tailwind color scale
More free tools
How it works
  1. Type a size in px, or in rem. The other box updates as you type, and the preview shows the size at real scale on your screen.
  2. Under the numbers you get the matching Tailwind classes, like p-4 for spacing and text-base for text. Click any of them to copy it.
  3. Have a whole stylesheet? Paste it under “Convert a block of CSS” and copy it back with every px turned into rem. Or copy a prompt that asks your AI coding agent to do it across your project.
Questions
How do I convert px to rem?
Divide the px value by the root font size, which is 16px in every browser unless you change it. So 24px ÷ 16 = 1.5rem, and 14px ÷ 16 = 0.875rem. To go back, multiply: 2rem × 16 = 32px.
Why use rem instead of px?
rem follows the font size people set in their browser. Someone who needs bigger text gets a bigger page, not just bigger words in a cramped layout. It is also what Tailwind uses for its spacing and text sizes.
What if my site uses a different base size?
Change “Base font size” to match your html { font-size }. Some sites use 62.5% (10px) so that 1rem = 10px. Everything on the page, including the table and the CSS converter, follows the new base.
How do Tailwind classes map to px?
Each spacing step is 0.25rem, which is 4px at the default base. So p-1 = 4px, p-4 = 16px and p-6 = 24px. Tailwind v4 accepts any multiple of 0.25rem, like p-3.25; in v3, use an exact value like p-[13px].
Should borders be rem too?
Usually not. A 1px border should stay 1px so it stays crisp, which is why “Keep 1px as px” is on by default in the CSS converter.
Is anything uploaded?
No. Everything runs in your browser.