Expand description
Utilities for controlling the placement of positioned elements.
| Class | Properties |
|---|---|
| inset-<float> | inset: <float / 4>rem; |
| inset-<integer>/<integer> | inset: (<integer>/<integer>)%; |
| inset-px | inset: 1px; |
| inset-auto | inset: auto; |
| inset-full | inset: 100%; |
| inset-x-<float> | inset-inline: <float / 4>rem; |
| inset-x-<integer>/<integer> | inset-inline: (<integer>/<integer>)%; |
| inset-x-px | inset-inline: 1px; |
| inset-x-auto | inset-inline: auto; |
| inset-x-full | inset-inline: 100%; |
| inset-y-<float> | inset-block: <float / 4>rem; |
| inset-y-<integer>/<integer> | inset-block: (<integer>/<integer>)%; |
| inset-y-px | inset-block: 1px; |
| inset-y-auto | inset-block: auto; |
| inset-y-full | inset-block: 100%; |
| start-<float> | inset-inline-start: <float / 4>rem; |
| start-<integer>/<integer> | inset-inline-start: (<integer>/<integer>)%; |
| start-px | inset-inline-start: 1px; |
| start-auto | inset-inline-start: auto; |
| start-full | inset-inline-start: 100%; |
| end-<float> | inset-inline-end: <float / 4>rem; |
| end-<integer>/<integer> | inset-inline-end: (<integer>/<integer>)%; |
| end-px | inset-inline-end: 1px; |
| end-auto | inset-inline-end: auto; |
| end-full | inset-inline-end: 100%; |
| top-<float> | top: <float / 4>rem; |
| top-<integer>/<integer> | top: (<integer>/<integer>)%; |
| top-px | top: 1px; |
| top-auto | top: auto; |
| top-full | top: 100%; |
| bottom-<float> | bottom: <float / 4>rem; |
| bottom-<integer>/<integer> | bottom: (<integer>/<integer>)%; |
| bottom-px | bottom: 1px; |
| bottom-auto | bottom: auto; |
| bottom-full | bottom: 100%; |
| left-<float> | left: <float / 4>rem; |
| left-<integer>/<integer> | left: (<integer>/<integer>)%; |
| left-px | left: 1px; |
| left-auto | left: auto; |
| left-full | left: 100%; |
| right-<float> | right: <float / 4>rem; |
| right-<integer>/<integer> | right: (<integer>/<integer>)%; |
| right-px | right: 1px; |
| right-auto | right: auto; |
| right-full | right: 100%; |
§Tailwind compatibility
Top/right/bottom/left 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> or <percentage> property or the keyword auto is allowed as arbitrary value.
For example, top-[1.12rem].
§Negative values
This plugin supports negative values. For example, -top-2 or hover:-top-2.