Direction
Bottom
Controls the bottom placement of positioned elements.
| Class | Properties |
|---|---|
| dir-b-0 | bottom: 0rem; |
| dir-b-1 | bottom: 1rem; |
| dir-b-2 | bottom: 2rem; |
| dir-b-3 | bottom: 4rem; |
| dir-b-4 | bottom: 6rem; |
| dir-b-5 | bottom: 8rem; |
| dir-b-6 | bottom: 10rem; |
| dir-b-7 | bottom: 12rem; |
| dir-b-8 | bottom: 14rem; |
| dir-b-9 | bottom: 16rem; |
| dir-b-10 | bottom: 18rem; |
| dir-b-11 | bottom: 20rem; |
| dir-b-12 | bottom: 22rem; |
| dir-b-13 | bottom: 24rem; |
| dir-b-14 | bottom: 26rem; |
| dir-b-15 | bottom: 28rem; |
| dir-b-16 | bottom: 30rem; |
| dir-b-none | bottom: none; |
Inset
Controls the placement of positioned elements in all directions.
| Class | Properties |
|---|---|
| dir-i-0 | inset: 0rem; |
| dir-i-1 | inset: 1rem; |
| dir-i-2 | inset: 2rem; |
| dir-i-3 | inset: 4rem; |
| dir-i-4 | inset: 6rem; |
| dir-i-5 | inset: 8rem; |
| dir-i-6 | inset: 10rem; |
| dir-i-7 | inset: 12rem; |
| dir-i-8 | inset: 14rem; |
| dir-i-9 | inset: 16rem; |
| dir-i-10 | inset: 18rem; |
| dir-i-11 | inset: 20rem; |
| dir-i-12 | inset: 22rem; |
| dir-i-13 | inset: 24rem; |
| dir-i-14 | inset: 26rem; |
| dir-i-15 | inset: 28rem; |
| dir-i-16 | inset: 30rem; |
| dir-i-none | inset: none; |
Left
Controls the left placement of positioned elements.
| Class | Properties |
|---|---|
| dir-l-0 | left: 0rem; |
| dir-l-1 | left: 1rem; |
| dir-l-2 | left: 2rem; |
| dir-l-3 | left: 4rem; |
| dir-l-4 | left: 6rem; |
| dir-l-5 | left: 8rem; |
| dir-l-6 | left: 10rem; |
| dir-l-7 | left: 12rem; |
| dir-l-8 | left: 14rem; |
| dir-l-9 | left: 16rem; |
| dir-l-10 | left: 18rem; |
| dir-l-11 | left: 20rem; |
| dir-l-12 | left: 22rem; |
| dir-l-13 | left: 24rem; |
| dir-l-14 | left: 26rem; |
| dir-l-15 | left: 28rem; |
| dir-l-16 | left: 30rem; |
| dir-l-none | left: none; |
Right
Controls the right placement of positioned elements.
| Class | Properties |
|---|---|
| dir-r-0 | right: 0rem; |
| dir-r-1 | right: 1rem; |
| dir-r-2 | right: 2rem; |
| dir-r-3 | right: 4rem; |
| dir-r-4 | right: 6rem; |
| dir-r-5 | right: 8rem; |
| dir-r-6 | right: 10rem; |
| dir-r-7 | right: 12rem; |
| dir-r-8 | right: 14rem; |
| dir-r-9 | right: 16rem; |
| dir-r-10 | right: 18rem; |
| dir-r-11 | right: 20rem; |
| dir-r-12 | right: 22rem; |
| dir-r-13 | right: 24rem; |
| dir-r-14 | right: 26rem; |
| dir-r-15 | right: 28rem; |
| dir-r-16 | right: 30rem; |
| dir-r-none | right: none; |
Top
Controls the top placement of positioned elements.
| Class | Properties |
|---|---|
| dir-t-0 | top: 0rem; |
| dir-t-1 | top: 1rem; |
| dir-t-2 | top: 2rem; |
| dir-t-3 | top: 4rem; |
| dir-t-4 | top: 6rem; |
| dir-t-5 | top: 8rem; |
| dir-t-6 | top: 10rem; |
| dir-t-7 | top: 12rem; |
| dir-t-8 | top: 14rem; |
| dir-t-9 | top: 16rem; |
| dir-t-10 | top: 18rem; |
| dir-t-11 | top: 20rem; |
| dir-t-12 | top: 22rem; |
| dir-t-13 | top: 24rem; |
| dir-t-14 | top: 26rem; |
| dir-t-15 | top: 28rem; |
| dir-t-16 | top: 30rem; |
| dir-t-none | top: none; |
Using breakpoints
Using responsive breakpoints like sm:dir-*, md:dir-*, lg:dir-*, and xxl:dir-* allows targeting specific utilities in different viewports.
<div class="dir-1 md:dir-2 ..."></div>Using variants
Using :hover variants such as h:dir-* allows you to override elements and change their values when hovering over them.
<div class="dir-1 h:dir-2 ..."></div>