How do I customize the default spacing scale in Tailwind?

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

Post this Question & Answer:

How do I customize the default spacing scale in Tailwind?

Asked on Nov 22, 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 fit your design needs.

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

Additional Comment:

Use the `extend` keyword to add new spacing values without removing the default ones.
Spacing values are used for margin, padding, width, height, etc., and are defined in `rem` units by default.
After updating the configuration, rebuild your CSS to apply the changes.
Custom spacing values can be referenced using classes like `mt-72` or `p-96` in your HTML.

✅ Answered with Tailwind CSS best practices.

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

How do I customize the default spacing scale in Tailwind?

Asked on Nov 22, 2025

Answer

Real Questions. Clear Answers.