Ask any question about Tailwind CSS here... and get an instant response.

How can I customize the default spacing scale in Tailwind?

Asked on Nov 28, 2025

Answer

In Tailwind CSS, you can customize the default spacing scale by modifying the `theme.spacing` section in your `tailwind.config.js` file. This allows you to define custom spacing values that will be used throughout your project.

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

Additional Comment:

The `extend` keyword allows you to add to the existing spacing scale without removing the default values.
Custom spacing values can be used with any utility that accepts a spacing value, such as `p-72` for padding or `m-96` for margin.
Ensure you restart your development server after making changes to the `tailwind.config.js` file to see the updates.

✅ Answered with Tailwind CSS best practices.

Ask any question about Tailwind CSS here... and get an instant response.

How can I customize the default spacing scale in Tailwind?

Asked on Nov 28, 2025

Answer

The Q&A Network