How can I customize the default spacing scale in a Tailwind config file?

Question

Q&A Network · Accepted Answer

To customize the default spacing scale in Tailwind CSS, you can modify the `tailwind.config.js` file by extending or overriding the `spacing` key within the `theme` object. This allows you to define custom spacing values that can be used throughout your project.


    
    module.exports = {
      theme: {
        extend: {
          spacing: {
            '72': '18rem',
            '84': '21rem',
            '96': '24rem',
          }
        }
      }
    }

ADDITIONAL COMMENT:

Use the `extend` key to add new spacing values without removing the default ones.
Spacing values are typically used for padding, margin, width, and height utilities.
Values are defined in rem units, but you can use other units like px or em if needed.
To completely replace the default spacing scale, define the `spacing` key directly under `theme` without `extend`.

✅ Answered with Tailwind CSS best practices.

How can I customize the default spacing scale in a Tailwind config file?

Asked on Oct 08, 2025

Answer

The Q&A Network