Spacing

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.

Customizing

Responsive and State 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,
    }
}