Tailwind Size Converter
Convert Pixels (PX) to Tailwind size utilities (w-*, h-*, size-*) and back.
PX ↔ Tailwind Size
Tailwind's width and height scale uses 0.25rem (4px) increments.
px
16px=4
Forward Formula
Unit = PX ÷ 4
Example: 64 ÷ 4 = 16 (use w-16 / h-16)
Reverse Formula
PX = Unit × 4
Example: 24 × 4 = 96px (use size-24)
Tailwind's w-*, h-* and size-* utilities share the same 4px scale as spacing. Pixel-perfect sizes from your design system map directly to these utilities — divide by 4 and you're done.
Related Converters
PX to REM Converter
Convert pixels to rem instantly.
REM to PX Converter
Convert rem to pixels instantly.
PX to EM Converter
Convert pixels to em units.
EM to PX Converter
Convert em units back to pixels.
PX to Percentage Converter
Convert pixels to %.
Percentage to PX Converter
Convert % to pixels.
CSS Unit Converter
All CSS unit conversions in one place.
Tailwind Spacing Converter
Pixels ↔ Tailwind spacing scale.