Pixel Calculator
Convert between Tailwind spacing units, px, and rem. Enter a number with optional unit, or paste CSS (e.g. width: 127.563px; height: 96.546px;).
Width conversions
| Unit | Value | Example class | |
|---|---|---|---|
| Tailwind | — | — | |
| Pixels | — | — | |
| REM | — | — |
Height conversions
| Unit | Value | Example class | |
|---|---|---|---|
| Tailwind | — | — | |
| Pixels | — | — | |
| REM | — | — |
Reference
1 Tailwind unit = 0.25rem = 4px
1rem = 16px (default browser font size)
h-4 = h-[1rem] = h-[16px]
Instructions
Converts a size between Tailwind spacing units, px and rem, and gives you the Tailwind class to paste.
- Type a size into Width and/or Height. A bare number is read as Tailwind units; add
pxorremto say otherwise. - Or paste a CSS declaration into Paste CSS — the width and height are pulled out for you.
- Read the conversion tables, and copy the Tailwind class from the top.
Tips
- The reference numbers: 1 Tailwind unit = 0.25rem = 4px, and 1rem = 16px at the default browser font size.
- A value that has no clean Tailwind equivalent comes back as an arbitrary class such as
w-[127.563px]. - Whatever you type is kept in this browser, so the page comes back with your last values.
- Hit Example, then click Load example for a pasted CSS block, or either size field to fill just that one.