Tailwind CSS Unit Reference

Understand how Tailwind CSS sizing classes map to pixel and rem values for precise implementation.

No cal iniciar sessió

From

1rem

Context (affects rem/em/vw/vh/%)

Root font (px)

Parent font (px)

Viewport W (px)

Viewport H (px)

All conversions for 16 px

Root EM (rem)1 rem

EM (em)1 em

Points (pt)12 pt

Viewport Width (vw)1.11111 vw

Viewport Height (vh)1.77778 vh

Percent (%)100 %

Common pixel sizes → rem (at 16px base)

Tailwind CSS tips

🌀

Tailwind's default base is 16px. Its 4-point spacing system means 1 unit = 0.25rem = 4px. Set the base to 16 and enter 4 to see text-xs: 0.75rem = 12px.

💡

Tailwind text sizes: text-xs (12px/0.75rem), text-sm (14px/0.875rem), text-base (16px/1rem), text-lg (18px/1.125rem), text-xl (20px/1.25rem).

📐

Tailwind spacing: p-4 = 1rem = 16px, p-6 = 1.5rem = 24px, p-8 = 2rem = 32px. Use this tool to verify any class's pixel equivalent quickly.

🎨

When extending Tailwind with custom sizes in tailwind.config.js, define them in rem for consistency: fontSize: { "2xs": "0.625rem" } = 10px at 16px base.