Direction

Bottom

Controls the bottom placement of positioned elements.

Class	Property
dir-b-0	bottom: 0;
dir-b-1	bottom: 0.25;
dir-b-2	bottom: 0.5;
dir-b-3	bottom: 0.75;
dir-b-4	bottom: 1;
dir-b-5	bottom: 1.25;
dir-b-6	bottom: 1.5;
dir-b-7	bottom: 1.75;
dir-b-8	bottom: 2;
dir-b-9	bottom: 2.25;
dir-b-10	bottom: 2.5;
dir-b-11	bottom: 2.75;
dir-b-12	bottom: 3;
dir-b-13	bottom: 3.25;
dir-b-14	bottom: 3.5;
dir-b-15	bottom: 3.75;
dir-b-16	bottom: 4;
dir-b-none	bottom: none;

Inset

Controls the placement of positioned elements in all directions.

Class	Property
dir-i-0	inset: 0;
dir-i-1	inset: 0.25;
dir-i-2	inset: 0.5;
dir-i-3	inset: 0.75;
dir-i-4	inset: 1;
dir-i-5	inset: 1.25;
dir-i-6	inset: 1.5;
dir-i-7	inset: 1.75;
dir-i-8	inset: 2;
dir-i-9	inset: 2.25;
dir-i-10	inset: 2.5;
dir-i-11	inset: 2.75;
dir-i-12	inset: 3;
dir-i-13	inset: 3.25;
dir-i-14	inset: 3.5;
dir-i-15	inset: 3.75;
dir-i-16	inset: 4;
dir-i-none	inset: none;

Left

Controls the left placement of positioned elements.

Class	Property
dir-l-0	left: 0;
dir-l-1	left: 0.25;
dir-l-2	left: 0.5;
dir-l-3	left: 0.75;
dir-l-4	left: 1;
dir-l-5	left: 1.25;
dir-l-6	left: 1.5;
dir-l-7	left: 1.75;
dir-l-8	left: 2;
dir-l-9	left: 2.25;
dir-l-10	left: 2.5;
dir-l-11	left: 2.75;
dir-l-12	left: 3;
dir-l-13	left: 3.25;
dir-l-14	left: 3.5;
dir-l-15	left: 3.75;
dir-l-16	left: 4;
dir-l-none	left: none;

Right

Controls the right placement of positioned elements.

Class	Property
dir-r-0	right: 0;
dir-r-1	right: 0.25;
dir-r-2	right: 0.5;
dir-r-3	right: 0.75;
dir-r-4	right: 1;
dir-r-5	right: 1.25;
dir-r-6	right: 1.5;
dir-r-7	right: 1.75;
dir-r-8	right: 2;
dir-r-9	right: 2.25;
dir-r-10	right: 2.5;
dir-r-11	right: 2.75;
dir-r-12	right: 3;
dir-r-13	right: 3.25;
dir-r-14	right: 3.5;
dir-r-15	right: 3.75;
dir-r-16	right: 4;
dir-r-none	right: none;

Top

Controls the top placement of positioned elements.

Class	Property
dir-t-0	top: 0;
dir-t-1	top: 0.25;
dir-t-2	top: 0.5;
dir-t-3	top: 0.75;
dir-t-4	top: 1;
dir-t-5	top: 1.25;
dir-t-6	top: 1.5;
dir-t-7	top: 1.75;
dir-t-8	top: 2;
dir-t-9	top: 2.25;
dir-t-10	top: 2.5;
dir-t-11	top: 2.75;
dir-t-12	top: 3;
dir-t-13	top: 3.25;
dir-t-14	top: 3.5;
dir-t-15	top: 3.75;
dir-t-16	top: 4;
dir-t-none	top: none;

---

Using responsive modifiers

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 hover modifiers

Using :hover modifiers 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>