Tailwind CSS - Customizing Spacing


Tailwind CSS Spacing allows you to specify the default spacing and sizing scale for your project.

You can use the 'spacing' key in the 'theme' section of your 'tailwind.config.js' file to customize Tailwind's default spacing/sizing scale.

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    spacing: {
      '1': '8px',
      '2': '12px',
      '3': '16px',
    }
  }
}

Note: By default the spacing scale is inherited by the padding, margin, width, minWidth, maxWidth, height, minHeight, maxHeight, gap, inset, space, translate, scrollMargin, and scrollPadding core plugins.

Extending the default spacing scale

You can extend the default spacing scale in Tailwind by adding custom values to the theme.extend.spacing section in your tailwind.config.js file. This allows you to create new spacing classes like p-13, m-15, and h-128, in addition to the default ones.

/** @type {import('tailwindcss').Config} */
module.exports = {
    theme: {
    extend: {
        spacing: {
        '13': '3.25rem',
        '15': '3.75rem',
        '128': '32rem',
        '144': '36rem',
        }
    }
    }
}

Overriding the default spacing scale

You can replace the default spacing scale in Tailwind by updating the 'theme.spacing' section in your 'tailwind.config.js' file. This will remove the default spacing classes and generate new classes like p-sm, m-md, w-lg, and h-xl based on your custom settings.

/** @type {import('tailwindcss').Config} */
module.exports = {
    theme: {
    spacing: {
        sm: '8px',
        md: '12px',
        lg: '16px',
        xl: '24px',
    }
    }
}

Default Spacing Scale

Tailwind comes with a in-built numeric spacing scale that includes a range of values. The values are proportional, meaning that a higher value will always be a multiple of the lower value (e.g., 16 is twice 8).

Name Size Pixels
0 0px 0px
px 1px 1px
0.5 0.125rem 2px
1 0.25rem 4px
1.5 0.375rem 6px
2 0.5rem 8px
2.5 0.625rem 10px
3 0.75rem 12px
3.5 0.875rem 14px
4 1rem 16px
5 1.25rem 20px
6 1.5rem 24px
7 1.75rem 28px
8 2rem 32px
9 2.25rem 36px
10 2.5rem 40px
11 2.75rem 44px
12 3rem 48px
14 3.5rem 56px
16 4rem 64px
20 5rem 80px
24 6rem 96px
28 7rem 112px
32 8rem 128px
36 9rem 144px
40 10rem 160px
44 11rem 176px
48 12rem 192px
52 13rem 208px
56 14rem 224px
60 15rem 240px
64 16rem 256px
72 18rem 288px
80 20rem 320px
96 24rem 384px