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 Sep 27, 2025

Answer

To customize the default spacing scale in Tailwind CSS, you'll need to modify the `tailwind.config.js` file. This file allows you to extend or override the default configuration, including the spacing scale used for margin, padding, and other spacing utilities.

<!-- 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 values to the existing spacing scale without removing the default values.
Each key in the `spacing` object represents a new spacing size, with the value being the corresponding CSS measurement.
After updating the configuration, ensure you rebuild your CSS to see the changes take effect.
Use these new spacing utilities by applying classes like `mt-72`, `p-84`, or `gap-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 Sep 27, 2025

Answer

Real Questions. Clear Answers.