Customizing Spacing

Tailwind CSS v4 comes with a comprehensive default spacing scale that is perfect for most projects. However, you can easily extend or override this scale directly in your CSS using the “CSS-first” configuration.

Extending the Spacing Scale

To add a custom spacing value, use the --spacing-* variables within your @theme block. This allows you to define new values while keeping the default scale intact.

@theme {
  --spacing-4_5: 1.125rem;
  --spacing-10_5: 2.625rem;
}

Now you can use these new values in your utilities just like the defaults:

<div class="p-4_5 m-10_5">
  <!-- Custom padding and margin -->
</div>

Overriding the Default Scale

If you want to replace the entire spacing scale with your own, you can set the --spacing variable. This sets a base value (like 0.25rem) that utilities will use as a multiplier.

@theme {
  --spacing: 0.25rem; /* The default is 0.25rem */
}

Arbitrary Values

For one-off adjustments where adding a new theme variable doesn’t make sense, Tailwind’s arbitrary value syntax is perfect. It works specifically well for pixel-perfect designs.

<div class="top-[117px] p-[10px]">
  <!-- Custom one-off spacing -->
</div>

For more details on customization, refer to the official Spacing documentation .