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

Padding

Margin

Negative Margin

Side (optional)

All (default)

Top

Right

Bottom

Left

Horizontal

Vertical

Space

0

0.25rem

0.5rem

0.75rem

1rem

1.25rem

1.5rem

2rem

2.5rem

3rem

4rem

5rem

6rem

8rem

1px

auto (margins only)

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,
    }
}