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

How do I customize spacing in Tailwind config?

Asked on Nov 07, 2025

Answer

To customize spacing in Tailwind CSS, you can modify the `tailwind.config.js` file to extend or override the default spacing scale. This allows you to define custom values for margins, padding, and other spacing utilities.

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

Additional Comment:

To apply the custom spacing, use classes like "mt-72" or "p-96" in your HTML.
The values you define can be any valid CSS length unit, such as rem, px, or %.
Extending the spacing scale does not remove existing values; it only adds new ones.
For a complete override, use the "spacing" key directly without "extend".

✅ Answered with Tailwind CSS best practices.

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

How do I customize spacing in Tailwind config?

Asked on Nov 07, 2025

Answer

The Q&A Network