Expand description
Utilities for controlling an element’s margin.
| Class | Properties |
|---|---|
| m-<float> | margin: <float / 4>rem; |
| m-<integer>/<integer> | margin: (<integer>/<integer>)%; |
| m-px | margin: 1px; |
| m-auto | margin: auto; |
| mx-<float> | margin-inline: <float / 4>rem; |
| mx-<integer>/<integer> | margin-inline: (<integer>/<integer>)%; |
| mx-px | margin-inline: 1px; |
| mx-auto | margin-inline: auto; |
| my-<float> | margin-block: <float / 4>rem; |
| my-<integer>/<integer> | margin-block: (<integer>/<integer>)%; |
| my-px | margin-block: 1px; |
| my-auto | margin-block: auto; |
| ms-<float> | margin-inline-start: <float / 4>rem; |
| ms-<integer>/<integer> | margin-inline-start: (<integer>/<integer>)%; |
| ms-px | margin-inline-start: 1px; |
| ms-auto | margin-inline-start: auto; |
| me-<float> | margin-inline-end: <float / 4>rem; |
| me-<integer>/<integer> | margin-inline-end: (<integer>/<integer>)%; |
| me-px | margin-inline-end: 1px; |
| me-auto | margin-inline-end: auto; |
| mt-<float> | margin-top: <float / 4>rem; |
| mt-<integer>/<integer> | margin-top: (<integer>/<integer>)%; |
| mt-px | margin-top: 1px; |
| mt-auto | margin-top: auto; |
| mr-<float> | margin-right: <float / 4>rem; |
| mr-<integer>/<integer> | margin-right: (<integer>/<integer>)%; |
| mr-px | margin-right: 1px; |
| mr-auto | margin-right: auto; |
| mb-<float> | margin-bottom: <float / 4>rem; |
| mb-<integer>/<integer> | margin-bottom: (<integer>/<integer>)%; |
| mb-px | margin-bottom: 1px; |
| mb-auto | margin-bottom: auto; |
| ml-<float> | margin-left: <float / 4>rem; |
| ml-<integer>/<integer> | margin-left: (<integer>/<integer>)%; |
| ml-px | margin-left: 1px; |
| ml-auto | margin-left: auto; |
§Tailwind compatibility
Margin values don’t follow Tailwind’s philosophy of limiting possible values and all spacing values are supported. They are however perfectly compatible with Tailwind’s values.
§Arbitrary values
Any <length> property is allowed as arbitrary value.
For example, mt-[5vw].
§Negative values
This plugin supports negative values. For example, -mt-2 or hover:-mt-2.