Tailwind Spacing Converter
Convert Pixels (PX) to Tailwind spacing units (e.g. p-4, gap-6) and back.
PX ↔ Tailwind Spacing
Tailwind's default spacing scale uses 0.25rem (4px) increments. Enter a pixel value to find the closest utility.
px
16px=4
Forward Formula
Unit = PX ÷ 4
Example: 16 ÷ 4 = 4 (use p-4)
Reverse Formula
PX = Unit × 4
Example: 6 × 4 = 24px (use gap-6)
Tailwind's default spacing scale increments by 0.25rem (4px). A class like p-4 is 16px of padding, gap-6 is 24px, and mt-10is 40px. Use this converter to translate exact pixel measurements from a design file into the closest Tailwind utility.
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 Size Converter
Pixels ↔ Tailwind size utilities.