EM to Tailwind Converter

Convert EM to Tailwind Class.

4

About EM to Tailwind Converter

This tool converts EM values back to Tailwind utility classes. Since EM units are relative to their parent's font size, this tool resolves that relationship back to absolute pixels and then to the standard Tailwind REM-based scale.

Formula

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

Examples

1em (on 16px parent) -> 1rem -> 4 =
1em (on 24px parent) -> 1.5rem -> 6 =

Reference

  • • Converts to absolute PX first
  • • Then converts PX to REM
  • • Finally REM to Tailwind (×4)
  • • Context dependent calculation

Frequency Asked Questions

Why do I need Parent Size?

EM values change physical size based on the parent element's font size. 1em on a 20px parent is larger than 1em on a 16px parent.

Is the result exact?

If the calculation matches a grid step (0.25rem), yes. Otherwise it gives an approximate decimal.

Can I use EM in Tailwind?

Yes, `p-[1em]` is valid semantic Tailwind.