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 13, 2025

Answer

In Tailwind CSS, you can customize the default spacing scale by modifying the `theme.spacing` section in your Tailwind configuration file. This allows you to define your own set of spacing values that will 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:

The `extend` key allows you to add new spacing values without overriding the existing default ones.
Spacing values can be used for padding, margin, width, height, etc., using Tailwind's utility classes.
Ensure your custom values are consistent with your design system for best results.

✅ 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 13, 2025

Answer

The Q&A Network