Tailwind Spacing Converter

How the tailwind spacing converter works

Multiply the numeric utility value by the configured --spacing theme variable. Convert rem to pixels by multiplying by the root font size.

Convert Tailwind spacing 6 with the default theme variable

Spacing 6 multiplied by 0.25rem equals 1.5rem. At a 16px root font size, the computed equivalent is 24px, as in p-6 or gap-6.

Copyable code examples

Use these examples as a starting point, then match the values and assumptions to the rendered project.

<div class="p-6 gap-6">
  <!-- 1.5rem with the default spacing variable -->
</div>

@import "tailwindcss";

@theme {
  --spacing: 0.25rem;
}

.p-6 {
  padding: calc(var(--spacing) * 6);
}

Using the result accurately

Check the --spacing value in the actual project before treating a lookup as fixed. Tailwind v4 derives many numeric spacing utilities dynamically, and a custom theme can change every result.

References: Tailwind CSS spacing documentation.