PX to Tailwind Spacing Converter

Find the closest Tailwind CSS spacing class for any pixel value.

Loading converter...
Share this tool:

What Is PX to Tailwind Spacing Converter?

When translating a design into Tailwind CSS, you need the utility class that best matches a pixel measurement. This tool divides your px value by (root font size ÷ 4) and finds the nearest valid step on Tailwind's default spacing scale, so you get classes like p-4, gap-6, or m-8 instantly.

How to Convert PX to Tailwind Spacing?

Divide your pixel value by (root font size ÷ 4) to get the ideal step, then round to the nearest value on Tailwind's default spacing scale (0, px, 0.5, 1, 1.5, 2, … 96). At 16px root, divide px by 4 to get the step number.

How to use the PX to Tailwind Spacing converter

  1. 1

    Enter the pixel value from your design mockup, Figma frame, or browser inspector.

  2. 2

    Adjust root font size if your site uses a custom html font-size. This affects which Tailwind step matches.

  3. 3

    Use the closest match class (p-, m-, gap-, w-, h-) shown below. Exact matches are highlighted when your px hits a scale step.

PX to Tailwind Spacing Formula

step=
pxroot font size ÷ 4
Where:
pxPixels: The pixel value from your design or layout.
root font sizeRoot Font Size: The html { font-size } in pixels (default 16px).
stepTailwind Step: The ideal step before rounding, matched to the nearest value on the default spacing scale.

Common PX Values: Nearest Tailwind Spacing Class

PixelsTailwind StepExact pxREMClass
1pxpx1pxn/ap-px
2px0.52px0.125remp-0.5
4px14px0.25remp-1
6px1.56px0.375remp-1.5
8px28px0.5remp-2
10px2.510px0.625remp-2.5
12px312px0.75remp-3
14px3.514px0.875remp-3.5
16px416px1remp-4
20px520px1.25remp-5
24px624px1.5remp-6
28px728px1.75remp-7
32px832px2remp-8
36px936px2.25remp-9
40px1040px2.5remp-10
48px1248px3remp-12
56px1456px3.5remp-14
64px1664px4remp-16
72px1664px4remp-16
80px2080px5remp-20
96px2496px6remp-24
128px32128px8remp-32
192px48192px12remp-48
256px64256px16remp-64
384px96384px24remp-96

See the full scale with Tailwind Spacing to PX or convert px to rem with PX to REM.