How do you customize the spacing scale in Tailwind?

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

Post this Question & Answer:

How do you customize the spacing scale in Tailwind?

Asked on Oct 20, 2025

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.

<!-- BEGIN COPY / PASTE -->
    // tailwind.config.js
    module.exports = {
      theme: {
        extend: {
          spacing: {
            '72': '18rem',
            '84': '21rem',
            '96': '24rem',
          }
        }
      }
    }
    <!-- END COPY / PASTE -->

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.

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

How do you customize the spacing scale in Tailwind?

Asked on Oct 20, 2025

Answer

Real Questions. Clear Answers.