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.

Name Size Pixels
0 0 0px
px 1px 1px
1 0.25rem 4px
2 0.5rem 8px
3 0.75rem 12px
4 1rem 16px
5 1.25rem 20px
6 1.5rem 24px
8 2rem 32px
10 2.5rem 40px
12 3rem 48px
16 4rem 64px
20 5rem 80px
24 6rem 96px
32 8rem 128px
40 10rem 160px
48 12rem 192px
56 14rem 224px
64 16rem 256px