Customizing Spacing

The section of your tailwind.config.js file allows you to override Tailwind’s default spacing/sizing scale.

By default the spacing scale is shared by the , margin, , and height utilities so the above configuration would generate classes like .p-2, .mt-3, .w-5, .h-6, etc.

This will disable Tailwind’s default spacing scale and generate classes like p-sm, m-md, w-lg, and h-xl instead.

As described in the , if you’d like to extend the default spacing scale, you can do so using the theme.extend.spacing section of your tailwind.config.js file:

By default, Tailwind includes a generous and comprehensive numeric spacing scale. The values are proportional, so 16 is twice as much spacing as 8 for example. One spacing unit is equal to 0.25rem, which translates to 4px by default in common browsers.

← Colors