Customization

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

  1. module.exports = {
  2. theme: {
  3. spacing: {
  4. '1': '8px',
  5. '2': '12px',
  6. '3': '16px',
  7. '4': '24px',
  8. '5': '32px',
  9. '6': '48px',
  10. }
  11. }
  12. }

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

  1. module.exports = {
  2. theme: {
  3. extend: {
  4. spacing: {
  5. '13': '3.25rem',
  6. '15': '3.75rem',
  7. '128': '32rem',
  8. '144': '36rem',
  9. }
  10. }
  11. }
  12. }

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

  1. module.exports = {
  2. theme: {
  3. spacing: {
  4. sm: '8px',
  5. md: '12px',
  6. lg: '16px',
  7. xl: '24px',
  8. }
  9. }
  10. }

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.

NameSizePixelsPreview
00px0px
px1px1px
0.50.125rem2px
10.25rem4px
1.50.375rem6px
20.5rem8px
2.50.625rem10px
30.75rem12px
3.50.875rem14px
41rem16px
51.25rem20px
61.5rem24px
71.75rem28px
82rem32px
92.25rem36px
102.5rem40px
112.75rem44px
123rem48px
143.5rem56px
164rem64px
205rem80px
246rem96px
287rem112px
328rem128px
369rem144px
4010rem160px
4411rem176px
4812rem192px
5213rem208px
5614rem224px
6015rem240px
6416rem256px
7218rem288px
8020rem320px
9624rem384px