Custom Spacing

Tailwind's default spacing scale goes from 0 to 96 in increments of 0.25rem. Sometimes you need values that don't fit that scale — maybe your design system uses 5px increments or you need a very specific value. Custom spacing lets you extend or override the defaults.

Extending the spacing scale

Add new values to the spacing scale without removing existing ones.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      spacing: {
        '18': '4.5rem',
        '88': '22rem',
        '128': '32rem',
        '144': '36rem',
      },
    },
  },
}
    

This gives you mt-18, p-88, gap-128, and so on.

Overriding spacing values

If you want to replace the defaults entirely, put your values in theme.spacing instead of theme.extend.spacing.

theme: {
  spacing: {
    '0': '0',
    '1': '0.25rem',
    '2': '0.5rem',
    '3': '0.75rem',
    '4': '1rem',
    '5': '1.25rem',
    '6': '1.5rem',
    '8': '2rem',
    '10': '2.5rem',
    '12': '3rem',
    '16': '4rem',
    '20': '5rem',
    '24': '6rem',
  },
}
    

Using arbitrary values

For one-off spacing values, skip the config entirely and use square brackets.

<div class="mt-[13px]">13px top margin</div>
<div class="p-[2.5rem]">Custom padding</div>
<div class="gap-[1.25rem]">Custom gap</div>
    

Design system approach

When building a design system, define your spacing values once in the config and use them everywhere. This ensures consistency across your entire application — every margin, padding, and gap follows the same scale.