How do you customize the spacing scale in Tailwind?

Question

Q&A Network · Accepted Answer

In Tailwind CSS, customizing the spacing scale is done through the Tailwind configuration file, typically `tailwind.config.js`. This allows you to define your own spacing values that can be used throughout your project.


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

ADDITIONAL COMMENT:

Use the `extend` key to add new spacing values without overriding the default Tailwind spacing scale.
Spacing values are typically used for padding, margin, width, and height utilities.
After updating the configuration, ensure you rebuild your CSS to see the changes.

✅ Answered with Tailwind CSS best practices.

How do you customize the spacing scale in Tailwind?

Asked on Oct 20, 2025

Answer

The Q&A Network