Bottom / Left / Right / Top

Bottom

Controls the bottom placement of positioned elements.

Class	Properties
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;

A

<div class="d-18 p-r sm:dim-32 tc-white">
  <div class="dir-i-0 p-a rad-1 stripes"></div>
  <div class="ai-c bg-indigo d-f dir-b-0 dir-l-0 dir-r-0 h-16 jc-c p-4 p-a rad-1">A</div>
</div>

Inset

Controls the placement of positioned elements in all directions.

Class	Properties
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;

A

<div class="d-18 p-r sm:dim-32 tc-white">
  <div class="bg-indigo-1 dir-i-0 p-a rad-1"></div>
  <div class="ai-c bg-indigo d-f dim-32 dir-b-0 dir-r-0 jc-c p-4 p-a rad-1">A</div>
</div>

Left

Controls the left placement of positioned elements.

Class	Properties
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;

A

<div class="d-18 p-r rad-1 sm:dim-32 tc-white">
  <div class="dir-i-0 p-a rad-1 stripes"></div>
  <div class="ai-c bg-indigo d-f dir-b-0 dir-l-0 dir-t-0 jc-c p-4 p-a rad-1 w-16">A</div>
</div>

Right

Controls the right placement of positioned elements.

Class	Properties
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;

A

<div class="d-18 p-r rad-1 sm:dim-32 tc-white">
  <div class="dir-i-0 p-a rad-1 stripes"></div>
  <div class="ai-c bg-indigo d-f dir-b-0 dir-r-0 dir-t-0 jc-c p-4 p-a rad-1 w-16">A</div>
</div>

Top

Controls the top placement of positioned elements.

Class	Properties
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;

A

<div class="d-18 p-r sm:dim-32 tc-white">
  <div class="dir-i-0 p-a rad-1 stripes"></div>
  <div class="ai-c bg-indigo d-f dir-l-0 dir-r-0 dir-t-0 h-16 jc-c p-4 p-a rad-1">A</div>
</div>

Conditional styles

Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.

Media modifiers

You can combine 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>

Hover modifiers

Alternatively, you can apply :hover by using h:dir-* utility to override elements and change their values when hovering over them.

<div class="dir-1 h:dir-2 ..."></div>