Utility · CSS unit tool
Tailwind spacing converter
Tailwind's default spacing scale is built on a 4px unit, so the spacing key is px ÷ 4: 16px → `4`, 24px → `6`, 32px → `8`. Each key also maps to a rem value (key × 0.25rem) for your token docs.
Default scale: spacing ≈ px ÷ 4
Result
key 6
24px ÷ 4 = 6
CSS snippet
padding: 24px; /* or: p-[24px] */
Keyboard tip: press Tab or Shift+Tab to switch fields.
How the scale maps
Tailwind multiplies the spacing key by 0.25rem (4px at the default root). So `p-4` is 1rem/16px, `gap-6` is 1.5rem/24px, and `mt-8` is 2rem/32px.
To go from a design measurement to a class, divide the pixel value by 4. Values that don't land on the scale either round to the nearest key or use an arbitrary value like `p-[18px]`.
From mockup to utilities
Translating a Figma spec into Tailwind is faster when you think in keys: a 24px gap is simply `gap-6`, not a custom value.
When a measurement falls between keys, prefer snapping to the nearest scale step for consistency rather than scattering arbitrary values.
Copy-ready examples
<!-- 16px padding, 24px gap --> <div class="p-4 gap-6">…</div>
Frequently asked questions
- What is the Tailwind spacing formula?
- key = px ÷ 4, because each unit on the default scale is 0.25rem (4px). So 32px → key 8 → 2rem.
- What if my value isn't on the scale?
- Snap to the nearest key for consistency, or use an arbitrary value like p-[18px] when you truly need an off-scale number.
- Is tailwind spacing converter free to use?
- Yes. UnitCraft calculators are free and run entirely in your browser.
- Does UnitCraft send my input values to a server?
- No. Calculator inputs are processed locally in the browser tab.
- Can I copy the generated CSS output?
- Yes. Each tool provides copy-ready snippets so you can paste values directly into code.