Customizing Spacing

Customizing the default spacing scale for your project.


The theme.spacing section of your tailwind.config.js file allows you to override 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 shared by the padding, margin, width, and height utilities so the above configuration would generate classes like .p-2, .mt-3, .w-5, .h-6, etc.


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.


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: {
        '72': '18rem',
        '84': '21rem',
        '96': '24rem',
      }
    }
  }
}

This will generate classes like p-72, m-84, and h-96 in addition to all of Tailwind's default spacing/sizing utilities.


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.

NameSizePixels
000px
px1px1px
10.25rem4px
20.5rem8px
30.75rem12px
41rem16px
51.25rem20px
61.5rem24px
82rem32px
102.5rem40px
123rem48px
164rem64px
205rem80px
246rem96px
328rem128px
4010rem160px
4812rem192px
5614rem224px
6416rem256px

Tailwind UI is now in early access!