Customizing Spacing

Customizing the default spacing and sizing scale for your project.

Use the spacing key in the theme section of your tailwind.config.js file to customize Tailwind’s default spacing/sizing scale.

// tailwind.config.js
module.exports = {
  theme: {
    spacing: {
      '1': '8px',
      '2': '12px',
      '3': '16px',
      '4': '24px',
      '5': '32px',
      '6': '48px',
    }
  }
}

By default the spacing scale is inherited by the padding, margin, width, height, maxHeight, gap, inset, space, and translate core plugins.

Extending the default spacing scale

As described in the theme documentation, if you’d like to extend the default spacing scale, you can do so using the theme.extend.spacing section of your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      spacing: {
        '13': '3.25rem',
        '15': '3.75rem',
        '128': '32rem',
        '144': '36rem',
      }
    }
  }
}

This will generate classes like p-13, m-15, and h-128 in addition to all of Tailwind’s default spacing/sizing utilities.

Overriding the default spacing scale

As described in the theme documentation, if you’d like to override the default spacing scale, you can do so using the theme.spacing section of your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  theme: {
    spacing: {
      sm: '8px',
      md: '12px',
      lg: '16px',
      xl: '24px',
    }
  }
}

This will disable Tailwind’s default spacing scale and generate classes like p-sm, m-md, w-lg, and h-xl instead.

Default spacing scale

By default, Tailwind includes a generous and comprehensive numeric spacing scale. The values are proportional, so 16 is twice as much spacing as 8 for example. One spacing unit is equal to 0.25rem, which translates to 4px by default in common browsers.

←Colors   Variants→