Spacing

Utilities for controlling an element's padding and margin.

Work in progress!

More detailed documentation is coming soon, but in the meantime here's a quick class reference.

Control an element's padding and margin using the .p{side?}-{size}, .m{side?}-{size}, and .-m{side?}-{size} utilities.

For example, .pt-2 would add .5rem of padding to the top of the element, .mx-0 would make the horizontal margin zero, and .-mb-6 would add a 1.5rem negative margin to the bottom of an element.

Class
p Padding
m Margin
-m Negative Margin
Side (optional)
  All (default)
t Top
r Right
b Bottom
l Left
x Horizontal
y Vertical
Space
0 0
1 0.25rem
2 0.5rem
3 0.75rem
4 1rem
6 1.5rem
8 2rem
px 1px
auto auto (margins only)

Customizing

Responsive, Hover, and Focus Variants

By default, only responsive variants are generated for margin, negative margin and padding utilities.

You can control which variants are generated for the list utilities by modifying the margin, negativeMargin and padding property in the modules section of your Tailwind config file.

For example, this config will also generate hover and focus variants of the margin utilities, hover variants of the negative margin utilities, and focus variants of the padding utilities:

{
    // ...
    modules: {
        // ...
        margin: ['responsive', 'hover', 'focus'],
        negativeMargin: ['responsive', 'hover'],
        padding: ['responsive', 'focus'],
    }
}

Disabling

If you aren't using the margin, the negative margin, or padding utilities in your project, you can disable them entirely by setting the margin, negativeMargin and padding property to false in the modules section of your config file:

{
    // ...
    modules: {
        // ...
        margin: false,
        negativeMargin: false,
        padding: false,
    }
}