Size Conversion Between Pixel, Tailwind Classes, and Rem

A cheatsheet for quick tailwind size and font size reference

Assuming you have set 16px font-size in your project base, following will be the conversion table with examples:

General Size Conversion For height, width, max-height, margin, padding, and space between

Pixels Tailwind
(class examples)
REM
0px 0 (w-0, h-0) 0rem
1px (w-px, h-px) 0.0625rem
2px 0.5 (w-0.5, h-0.5) 0.125rem
4px 1 (h-1, max-h-1) 0.25rem
6px 1.5 (h-1.5) 0.375rem
8px 2 (h-2) 0.5rem
10px 2.5 (h-2.5) 0.625rem
12px 3 (h-3) 0.75rem
14px 3.5 (h-3.5) 0.875rem
16px 4 (h-4) 1rem
20px 5 (h-5) 1.25rem
24px 6 (h-6) 1.5rem
28px 7 (h-7) 1.75rem
32px 8 (h-8) 2rem
36px 9 (h-9) 2.25rem
40px 10 (h-10) 2.5rem
44px 11 (h-11) 2.75rem
48px 12 (h-12) 3rem
56px 14 (h-14) 3.5rem
64px 14 (h-16) 4rem
80px 16 (h-20) 5rem
96px 24 (h-24) 6rem
112px 28 (h-28) 7rem
128px 32 (h-32) 8rem
144px 36 (h-36) 9rem
160px 40 (h-40) 10rem
176px 44 (h-44) 11rem
192px 48 (h-48) 12rem
208px 52 (h-52) 13rem
224px 56 (h-56) 14rem
240px 60 (h-60) 15rem
256px 64 (h-64) 16rem
288px 72 (h-72) 18rem
320px 80 (h-80) 20rem
384px 96 (h-96) 24rem

Font Size Conversion

Pixels Tailwind Utility Class REM
12px text-xs 0.75rem
14px text-sm 0.875rem
16px text-base 1rem
18px text-lg 1.125rem
20px text-xl 1.25rem
24px text-2xl 1.5rem
30px text-3xl 1.875rem
36px text-4xl 2.25rem
48px text-5xl 3rem
60px text-6xl 3.75rem
72px text-7xl 4.5rem
96px text-8xl 6rem
128px text-9xl 8rem

Note that older tailwind versions will not have all of these utility classes.




When you purchase through links on techighness.com, I may earn an affiliate commission.