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).