Tailwind to EM Converter

Convert Tailwind to EM.

1em

EM is relative to the parent element's font size.

About Tailwind to EM Converter

This tool converts Tailwind CSS spacing scale values (based on REMs) into relative EM units. Since Tailwind values map to fixed REM inputs (1 unit = 0.25rem), converting them to EM requires knowing the context (Parent Font Size) to maintain the same visual size.

Formula

EM = (Tailwind Value × 0.25 × Root Size) / Parent Size

Examples

4 (1rem) on 16px parent = 1em
4 (1rem) on 20px parent = 0.8em

Reference

  • • Tailwind units are 0.25rem base
  • • EM is relative to parent font size
  • • Default Root Size: 16px
  • • Useful for scalable components

Frequency Asked Questions

Why convert Tailwind to EM?

To create components that scale relative to their own font size while using standard Tailwind spacing logic as a baseline.

Does Tailwind use EMs?

Tailwind's default scale uses REMs. You can configure it to use EMs if needed, or use arbitrary values like `p-[1em]`.

How does Root Size affect this?

Tailwind's scale is based on REM. To calculate the physical pixel size to then convert to EM, we need the Root font size (usually 16px).