All tools

Dev Utilities / PX ↔ REM / Tailwind

PX ↔ REM / Tailwind

Convert pixels to rem units and Tailwind CSS spacing classes. Configurable base font size.

px
Pixels (px)
Result
REM
1rem
Tailwind
4
Pixels

16px

Tailwind spacing scale — standard classes only use increments of 0.25, 0.5, 0.75, and 1 (where 1 unit = 4px). Values outside this scale require arbitrary syntax like [18px].
Reference Tablebase 16px
PXREMTailwind
0px0rem0
2px0.125rem0.5
4px0.25rem1
6px0.375rem1.5
8px0.5rem2
10px0.625rem2.5
12px0.75rem3
14px0.875rem3.5
16px1rem4
20px1.25rem5
24px1.5rem6
28px1.75rem7
32px2rem8
36px2.25rem9
40px2.5rem10
44px2.75rem11
48px3rem12
56px3.5rem14
64px4rem16
80px5rem20
96px6rem24
112px7rem28
128px8rem32
144px9rem36
160px10rem40
176px11rem44
192px12rem48
208px13rem52
224px14rem56
240px15rem60
256px16rem64
288px18rem72
320px20rem80
384px24rem96
Tips

1rem — equals base font size (default 16px)

Tailwind — 1 unit = 0.25rem = 4px

Arbitrary — use [18px] for non-standard values

Accessible — rem scales with user font settings

Try next

Color Picker
CSS Gradient
JSON to TypeScript

About PX ↔ REM / Tailwind

Convert pixel values to rem units and Tailwind CSS spacing classes instantly. RAW's PX to REM converter supports configurable base font sizes and shows the closest Tailwind class match. Essential for responsive design workflows and migrating from fixed pixel layouts to relative units.

How to use

  1. 1Enter a pixel value in the input field.
  2. 2View the converted rem value and matching Tailwind CSS class.
  3. 3Adjust the base font size if your project uses a non-standard root size.
  4. 4Copy any value with one click or browse the reference table for common conversions.

Frequently Asked Questions

What is the default base font size?
Browsers use 16px as the default root font size. This means 1rem = 16px by default. If your project sets a different root font size (e.g., 10px or 14px), adjust the base size in the tool to get accurate conversions.
How does Tailwind CSS spacing work?
Tailwind uses a spacing scale where each unit equals 4px by default (e.g., p-4 = 16px, m-8 = 32px). If your pixel value doesn't match an exact Tailwind class, the tool shows the closest match and the arbitrary value syntax like p-[18px].
Why should I use rem instead of px?
Rem units scale with the user's browser font size setting, making your layout more accessible. Users who increase their default font size for readability will see your entire layout scale proportionally, unlike fixed pixel values.