Tailwind Spacing to PX Converter

Convert Tailwind CSS spacing steps (p-4, gap-8, m-12…) to exact pixels and rem.

Loading converter...
Share this tool:

What Is Tailwind Spacing to PX Converter?

Tailwind CSS spacing utilities (padding, margin, gap, width, height) use a default scale built on 0.25rem increments. At a 16px root font size, each step equals step × 4 pixels. This converter maps any Tailwind step to exact px and rem values, with support for a custom root font size when you have changed html { font-size }.

How to Convert Tailwind Spacing to PX?

Multiply the Tailwind spacing step by (root font size ÷ 4). At the default 16px root, that is step × 4. The px step is always 1px flat. Half-steps (0.5, 1.5, 2.5, 3.5) equal 2px, 6px, 10px, and 14px at 16px root. rem = step × 0.25 for all numeric steps.

How to use the Tailwind Spacing to PX converter

  1. 1

    Pick a spacing step from the dropdown (e.g. 4, 8, 12) or type any numeric step. The scale matches Tailwind's default spacing utilities.

  2. 2

    Set your root font size if you changed html { font-size } (default is 16px). Pixels and rem update instantly.

  3. 3

    Copy the px or rem result, or grab a utility class like p-4, gap-8, or m-12 for your markup.

Tailwind Spacing to PX Formula

px=step × (root font size ÷ 4)
Where:
stepTailwind Step: The numeric spacing step from utility classes like p-4, gap-8, or m-12.
root font sizeRoot Font Size: The html { font-size } in pixels (default 16px). Scales all rem-based steps.
pxPixels: The computed pixel equivalent at your root font size.
remREM: rem = step × 0.25. The px class is always 1px flat, not rem-based.

Tailwind Default Spacing Scale: PX & REM at 16px Root

StepPixelsREMExample Class
00px0remp-0
px1pxn/ap-px
0.52px0.125remp-0.5
14px0.25remp-1
1.56px0.375remp-1.5
28px0.5remp-2
2.510px0.625remp-2.5
312px0.75remp-3
3.514px0.875remp-3.5
416px1remp-4
520px1.25remp-5
624px1.5remp-6
728px1.75remp-7
832px2remp-8
936px2.25remp-9
1040px2.5remp-10
1144px2.75remp-11
1248px3remp-12
1456px3.5remp-14
1664px4remp-16
2080px5remp-20
2496px6remp-24
28112px7remp-28
32128px8remp-32
36144px9remp-36
40160px10remp-40
44176px11remp-44
48192px12remp-48
52208px13remp-52
56224px14remp-56
60240px15remp-60
64256px16remp-64
72288px18remp-72
80320px20remp-80
96384px24remp-96

Reverse with PX to Tailwind Spacing or convert px to rem with PX to REM.