How do I customize the default spacing scale in Tailwind?

Question

Q&A Network · Accepted Answer

To customize the default spacing scale in Tailwind CSS, you'll need to modify the `tailwind.config.js` file. This file allows you to extend or override the default configuration, including the spacing scale used for margin, padding, and other spacing utilities.


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

ADDITIONAL COMMENT:

The `extend` key allows you to add new values to the existing spacing scale without removing the default values.
Each key in the `spacing` object represents a new spacing size, with the value being the corresponding CSS measurement.
After updating the configuration, ensure you rebuild your CSS to see the changes take effect.
Use these new spacing utilities by applying classes like `mt-72`, `p-84`, or `gap-96` in your HTML.

✅ Answered with Tailwind CSS best practices.

How do I customize the default spacing scale in Tailwind?

Asked on Sep 27, 2025

Answer

The Q&A Network