Layout

Flexbox

flex-basis

Utilities for controlling the initial size of flex items.

⌄

Class	Styles
basis-<number>	`flex-basis: calc(var(--spacing) * <number>);`
basis-full	`flex-basis: 100%;`
basis-auto	`flex-basis: auto;`
basis-3xs	`flex-basis: var(--container-3xs); /* 16rem (256px) */`
basis-2xs	`flex-basis: var(--container-2xs); /* 18rem (288px) */`
basis-xs	`flex-basis: var(--container-xs); /* 20rem (320px) */`
basis-sm	`flex-basis: var(--container-sm); /* 24rem (384px) */`
basis-md	`flex-basis: var(--container-md); /* 28rem (448px) */`
basis-lg	`flex-basis: var(--container-lg); /* 32rem (512px) */`
basis-xl	`flex-basis: var(--container-xl); /* 36rem (576px) */`
basis-2xl	`flex-basis: var(--container-2xl); /* 42rem (672px) */`
basis-3xl	`flex-basis: var(--container-3xl); /* 48rem (768px) */`
basis-4xl	`flex-basis: var(--container-4xl); /* 56rem (896px) */`
basis-5xl	`flex-basis: var(--container-5xl); /* 64rem (1024px) */`
basis-6xl	`flex-basis: var(--container-6xl); /* 72rem (1152px) */`
basis-7xl	`flex-basis: var(--container-7xl); /* 80rem (1280px) */`

EXAMPLES

Using the spacing scale

Use basis-<number> utilities like basis-64 and basis-128 to set the initial size of flex items based on the spacing scale:

                
                <div class="flex flex-row">
                    <div class="basis-1/4">01</div>
                    <div class="basis-1/4">02</div>
                    <div class="basis-2/4">03</div>
                </div>

Flexbox

flex-direction

Utilities for controlling the direction of flex items.

⌄

Class	Styles
flex-row	`flex-direction: row;`
flex-row-reverse	`flex-direction: row-reverse;`
flex-col	`flex-direction: column;`
flex-col-reverse	`flex-direction: column-reverse;`

EXAMPLES

Row

Use flex-row to position flex items horizontally in the same direction as text:

                    
                    <div class="flex flex-row ...">
                        <div>01</div>
                        <div>02</div>
                        <div>03</div>
                    </div>

Flexbox

flex-wrap

Utilities for controlling how flex items wrap.

⌄

Class	Styles
flex-nowrap	`flex-wrap: nowrap;`
flex-wrap	`flex-wrap: wrap;`
flex-wrap-reverse	`flex-wrap: wrap-reverse;`

EXAMPLES

Wrap normally

Use flex-wrap to allow flex items to wrap:

                    
                    <div class="flex flex-wrap">
                        <div>01</div>
                        <div>02</div>
                        <div>03</div>
                    </div>

Flexbox

flex

Utilities for controlling how flex items both grow and shrink.

⌄

Class	Styles
flex-<number>	`flex: <number>;`
flex-<fraction>	`flex: calc(<fraction> * 100%);`
flex-auto	`flex: 1 1 auto;`
flex-initial	`flex: 0 1 auto;`
flex-none	`flex: none;`
grow	`flex-grow: 1;`
grow-<number>	`flex-grow: <number>;`
shrink	`flex-shrink: 1;`
shrink-<number>	`flex-shrink: <number>;`

EXAMPLES

Basic example

Use flex-<number> utilities like flex-1 to allow a flex item to grow and shrink as needed, ignoring its initial size:

                    
                    <div class="flex">
                    <div class="w-14 flex-none ...">01</div>
                    <div class="w-auto flex-1 ...">02</div>
                    <div class="w-auto flex-1 ...">03</div>
                    </div>

Grid

grid-template-columns

Utilities for specifying the columns in a grid layout.

⌄

Class	Styles
grid-cols-<number>	`grid-template-columns: repeat(<number>, minmax(0, 1fr));`
grid-cols-none	`grid-template-columns: none;`
grid-cols-subgrid	`grid-template-columns: subgrid;`

EXAMPLES

Specifying the grid columns

Use grid-cols-<number> utilities like grid-cols-2 and grid-cols-4 to create grids with n equally sized columns:

                
                    <div class="grid grid-cols-4 gap-4">
                    <div>01</div>
                    <!-- ... -->
                    <div>09</div>
                    </div>

Grid

grid-column

Utilities for controlling how elements are sized and placed across grid columns.

⌄

Class	Styles
col-span-<number>	`grid-column: span <number> / span <number>;`
col-span-full	`grid-column: 1 / -1;`
col-start-<number>	`grid-column-start: <number>;`
-col-start-<number>	`grid-column-start: calc(<number> * -1);`
col-start-auto	`grid-column-start: auto;`
col-end-<number>	`grid-column-end: <number>;`
-col-end-<number>	`grid-column-end: calc(<number> * -1);`
col-end-auto	`grid-column-end: auto;`
col-auto	`grid-column: auto;`
col-<number>	`grid-column: <number>;`
-col-<number>	`grid-column: calc(<number> * -1);`

EXAMPLES

Spanning columns

Use col-span-<number> utilities like col-span-2 and col-span-4 to make an element span n columns:

                
                    <div class="grid grid-cols-3 gap-4">
                    <div>01</div>
                    <div>02</div>
                    <div>03</div>
                    <div class="col-span-2">04</div>
                    <div>05</div>
                    <div>06</div>
                    <div class="col-span-2">07</div>
                    </div>

Grid

grid-template-rows

Utilities for specifying the rows in a grid layout.

⌄

Class	Styles
grid-rows-<number>	`grid-template-rows: repeat(<number>, minmax(0, 1fr));`
grid-rows-none	`grid-template-rows: none;`
grid-rows-subgrid	`grid-template-rows: subgrid;`

EXAMPLES

Specifying the grid rows

Use grid-rows-<number> utilities like grid-rows-2 and grid-rows-4 to create grids with n equally sized rows:

                
                    <div class="grid grid-cols-3 grid-rows-4 gap-4">
                    <div>01</div>
                    <!-- ... -->
                    <div>09</div>
                    </div>

Grid

grid-row

Utilities for controlling how elements are sized and placed across grid rows.

⌄

Class	Styles
row-span-<number>	`grid-row: span <number> / span <number>;`
row-span-full	`grid-row: 1 / -1;`
row-start-<number>	`grid-row-start: <number>;`
-row-start-<number>	`grid-row-start: calc(<number> * -1);`
row-start-auto	`grid-row-start: auto;`
row-end-<number>	`grid-row-end: <number>;`
-row-end-<number>	`grid-row-end: calc(<number> * -1);`
row-end-auto	`grid-row-end: auto;`
row-auto	`grid-row: auto;`
row-<number>	`grid-row: <number>;`
-row-<number>	`grid-row: calc(<number> * -1);`

EXAMPLES

Spanning rows

Use row-span-<number> utilities like row-span-2 and row-span-4 to make an element span n rows:

<div class="grid grid-flow-col grid-rows-3 gap-4">
                        <div class="row-span-3 ...">01</div>
                        <div class="col-span-2 ...">02</div>
                        <div class="col-span-2 row-span-2 ...">03</div>
                        </div>

Utility

gap

Utilities for controlling gutters between grid and flexbox items.

⌄

Class	Styles
gap-<number>	`gap: calc(var(--spacing) * <value>);`
gap-x-<number>	`column-gap: calc(var(--spacing) * <value>);`
gap-y-<number>	`row-gap: calc(var(--spacing) * <value>);`

EXAMPLES

Basic example

Use gap-<number> utilities like gap-2 and gap-4 to change the gap between both rows and columns in grid and flexbox layouts:

<div class="grid grid-cols-2 gap-4">
                        <div>01</div>
                        <div>02</div>
                        <div>03</div>
                        <div>04</div>
                        </div>

Utility

justify-content

Utilities for controlling how flex and grid items are positioned along a container's main axis.

⌄

Class	Styles
justify-start	`justify-content: flex-start;`
justify-end	`justify-content: flex-end;`
justify-end-safe	`justify-content: safe flex-end;`
justify-center	`justify-content: center;`
justify-center-safe	`justify-content: safe center;`
justify-between	`justify-content: space-between;`
justify-around	`justify-content: space-around;`
justify-evenly	`justify-content: space-evenly;`
justify-stretch	`justify-content: stretch;`
justify-baseline	`justify-content: baseline;`
justify-normal	`justify-content: normal;`

EXAMPLES

Start

Use the justify-start utility to justify items against the start of the container's main axis:

<div class="flex justify-start ...">
                        <div>01</div>
                        <div>02</div>
                        <div>03</div>
                        </div>

Utility

justify-items

Utilities for controlling how grid items are aligned along their inline axis.

⌄

Class	Styles
justify-items-start	`justify-items: start;`
justify-items-end	`justify-items: end;`
justify-items-end-safe	`justify-items: safe end;`
justify-items-center	`justify-items: center;`
justify-items-center-safe	`justify-items: safe center;`
justify-items-stretch	`justify-items: stretch;`
justify-items-normal	`justify-items: normal;`

EXAMPLES

Start

Use the justify-items-start utility to justify grid items against the start of their inline axis:

<div class="grid grid-cols-3 grid-rows-2 gap-4 justify-items-start">
                        <div class="example-grid-cell"><div class="example-flex-direction-box" style="background: #22B6F6;">01</div></div>
                        <div class="example-grid-cell"><div class="example-flex-direction-box" style="background: #22B6F6;">02</div></div>
                        <div class="example-grid-cell"><div class="example-flex-direction-box" style="background: #22B6F6;">03</div></div>
                        <div class="example-grid-cell"><div class="example-flex-direction-box" style="background: #22B6F6;">04</div></div>
                        <div class="example-grid-cell"><div class="example-flex-direction-box" style="background: #22B6F6;">05</div></div>
                        <div class="example-grid-cell"><div class="example-flex-direction-box" style="background: #22B6F6;">06</div></div>
                        </div>

Utility

align-items

Utilities for controlling how flex and grid items are positioned along a container's cross axis.

⌄

Class	Styles
items-start	`align-items: flex-start;`
items-end	`align-items: flex-end;`
items-end-safe	`align-items: safe flex-end;`
items-center	`align-items: center;`
items-center-safe	`align-items: safe center;`
items-baseline	`align-items: baseline;`
items-baseline-last	`align-items: last baseline;`
items-stretch	`align-items: stretch;`

EXAMPLES

Stretch

Use the items-stretch utility to stretch items to fill the container's cross axis:

<div class="flex items-stretch ...">
                            <div class="py-4">01</div>
                            <div class="py-12">02</div>
                            <div class="py-8">03</div>
                        </div>

Utility

utility-classes

Common utility classes.

⌄

Class	Styles
z-<number>	`z-index-<number>;`
items-end	`align-items: flex-end;`
static	`position: static;`
fixed	`position: fixed;`
absolute	`position: absolute;`
relative	`position: relative;`
sticky	`position: sticky;`
overflow-auto	`overflow: auto;`
overflow-hidden	`overflow: hidden;`
overflow-clip	`overflow: clip;`
overflow-visible	`overflow: visible;`
overflow-scroll	`overflow: scroll;`
overflow-x-auto	`overflow-x: auto;`
overflow-y-auto	`overflow-y: auto;`
overflow-x-hidden	`overflow-x: hidden;`
overflow-y-hidden	`overflow-y: hidden;`
overflow-x-clip	`overflow-x: clip;`
overflow-y-clip	`overflow-y: clip;`
overflow-x-visible	`overflow-x: visible;`
overflow-y-visible	`overflow-y: visible;`
overflow-x-scroll	`overflow-x: scroll;`
overflow-y-scroll	`overflow-y: scroll;`
box-border	`box-sizing: border-box;`
box-content	`box-sizing: content-box;`
inline	`display: inline;`
block	`display: block;`
inline-block	`display: inline-block;`
flex	`display: flex;`
inline-flex	`display: inline-flex;`
grid	`display: grid;`
inline-grid	`display: inline-grid;`
hidden	`display: none;`

Spacing

padding

Utilities for controlling an element's padding.

⌄

Class	Styles
p-0	`no padding`
p-1	`padding: 0.25rem;`
p-2	`padding: 0.5rem;`
p-3 – p-12	`padding: 1rem; ... 8rem;`
pt-1	`padding-top: 0.25rem;`
pt-2	`padding-top: 0.5rem;`
pt-3 – pt-12	`padding-top: 1rem; ... 8rem;`
pr-1	`padding-right: 0.25rem;`
pr-2	`padding-right: 0.5rem;`
pr-3 – pr-12	`padding-right: 1rem; ... 8rem;`
pb-1	`padding-bottom: 0.25rem;`
pb-2	`padding-bottom: 0.5rem;`
pb-3 – pb-12	`padding-bottom: 1rem; ... 8rem;`
pl-1	`padding-left: 0.25rem;`
pl-2	`padding-left: 0.5rem;`
pl-3 – pl-12	`padding-left: 1rem; ... 8rem;`
px-1	`padding-x: 0.25rem;`
px-2	`padding-x: 0.5rem;`
px-3 – px-12	`padding-x: 1rem; ... 8rem;`
py-1	`padding-y: 0.25rem;`
py-2	`padding-y: 0.5rem;`
py-3 – py-12	`padding-y: 1rem; ... 8rem;`

Spacing

margin

Utilities for controlling an element's margin.

⌄

Class	Styles
m-0	`no margin`
m-1	`margin: 0.25rem;`
m-2	`margin: 0.5rem;`
m-3 – m-12	`margin: 1rem; ... 8rem;`
mt-1	`margin-top: 0.25rem;`
mt-2	`margin-top: 0.5rem;`
mt-3 – mt-12	`margin-top: 1rem; ... 8rem;`
mr-1	`margin-right: 0.25rem;`
mr-2	`margin-right: 0.5rem;`
mr-3 – mr-12	`margin-right: 1rem; ... 8rem;`
mb-1	`margin-bottom: 0.25rem;`
mb-2	`margin-bottom: 0.5rem;`
mb-3 – mb-12	`margin-bottom: 1rem; ... 8rem;`
ml-1	`margin-left: 0.25rem;`
ml-2	`margin-left: 0.5rem;`
ml-3 – ml-12	`margin-left: 1rem; ... 8rem;`
mx-1	`margin-x: 0.25rem;`
mx-2	`margin-x: 0.5rem;`
mx-3 – mx-12	`margin-x: 1rem; ... 8rem;`
my-1	`margin-y: 0.25rem;`
my-2	`margin-y: 0.5rem;`
my-3 – my-12	`margin-y: 1rem; ... 8rem;`

Sizing

width

Utilities for controlling the width of an element.

⌄

Class	Styles
w-0	`width: 0;`
w-1	`width: 0.25rem;`
w-2	`width: 0.5rem;`
w-3 – w-12	`width: 1rem; ... 8rem;`
w-auto	`width: auto;`
w-full	`width: 100%;`
w-screen	`width: 100vw;`
w-3xs	`width: var(--container-3xs); /* 16rem (256px) */`
w-2xs	`width: var(--container-2xs); /* 18rem (288px) */`
w-xs	`width: var(--container-xs); /* 20rem (320px) */`
w-sm	`width: var(--container-sm); /* 24rem (384px) */`
w-md	`width: var(--container-md); /* 28rem (448px) */`
w-lg	`width: var(--container-lg); /* 32rem (512px) */`
w-xl	`width: var(--container-xl); /* 36rem (576px) */`
w-2xl	`width: var(--container-2xl); /* 42rem (672px) */`
w-3xl	`width: var(--container-3xl); /* 48rem (768px) */`
w-4xl	`width: var(--container-4xl); /* 56rem (896px) */`
w-5xl	`width: var(--container-5xl); /* 64rem (1024px) */`
w-6xl	`width: var(--container-6xl); /* 72rem (1152px) */`
w-7xl	`width: var(--container-7xl); /* 80rem (1280px) */`

Sizing

height

Utilities for controlling the height of an element.

⌄

Class	Styles
h-0	`height: 0;`
h-1	`height: 0.25rem;`
h-2	`height: 0.5rem;`
h-3 – h-12	`height: 1rem; ... 8rem;`
h-auto	`height: auto;`
h-full	`height: 100%;`
h-screen	`height: 100vh;`
h-3xs	`height: var(--container-3xs); /* 16rem (256px) */`
h-2xs	`height: var(--container-2xs); /* 18rem (288px) */`
h-xs	`height: var(--container-xs); /* 20rem (320px) */`
h-sm	`height: var(--container-sm); /* 24rem (384px) */`
h-md	`height: var(--container-md); /* 28rem (448px) */`
h-lg	`height: var(--container-lg); /* 32rem (512px) */`
h-xl	`height: var(--container-xl); /* 36rem (576px) */`
h-2xl	`height: var(--container-2xl); /* 42rem (672px) */`
h-3xl	`height: var(--container-3xl); /* 48rem (768px) */`
h-4xl	`height: var(--container-4xl); /* 56rem (896px) */`
h-5xl	`height: var(--container-5xl); /* 64rem (1024px) */`
h-6xl	`height: var(--container-6xl); /* 72rem (1152px) */`
h-7xl	`height: var(--container-7xl); /* 80rem (1280px) */`

Sizing

min-width

Utilities for controlling the minimum width of an element.

⌄

Class	Styles
min-w-0	`min-width: 0;`
min-w-1	`min-width: 0.25rem;`
min-w-2	`min-width: 0.5rem;`
min-w-3 – min-w-12	`min-width: 1rem; ... 8rem;`
min-w-full	`min-width: 100%;`
min-w-3xs	`min-width: var(--container-3xs); /* 16rem (256px) */`
min-w-2xs	`min-width: var(--container-2xs); /* 18rem (288px) */`
min-w-xs	`min-width: var(--container-xs); /* 20rem (320px) */`
min-w-sm	`min-width: var(--container-sm); /* 24rem (384px) */`
min-w-md	`min-width: var(--container-md); /* 28rem (448px) */`
min-w-lg	`min-width: var(--container-lg); /* 32rem (512px) */`
min-w-xl	`min-width: var(--container-xl); /* 36rem (576px) */`
min-w-2xl	`min-width: var(--container-2xl); /* 42rem (672px) */`
min-w-3xl	`min-width: var(--container-3xl); /* 48rem (768px) */`
min-w-4xl	`min-width: var(--container-4xl); /* 56rem (896px) */`
min-w-5xl	`min-width: var(--container-5xl); /* 64rem (1024px) */`
min-w-6xl	`min-width: var(--container-6xl); /* 72rem (1152px) */`
min-w-7xl	`min-width: var(--container-7xl); /* 80rem (1280px) */`

Sizing

max-width

Utilities for controlling the maximum width of an element.

⌄

Class	Styles
max-w-0	`max-width: 0;`
max-w-1	`max-width: 0.25rem;`
max-w-2	`max-width: 0.5rem;`
max-w-3 – max-w-12	`max-width: 1rem; ... 8rem;`
max-w-none	`max-width: none;`
max-w-full	`max-width: 100%;`
max-w-3xs	`max-width: var(--container-3xs); /* 16rem (256px) */`
max-w-2xs	`max-width: var(--container-2xs); /* 18rem (288px) */`
max-w-xs	`max-width: var(--container-xs); /* 20rem (320px) */`
max-w-sm	`max-width: var(--container-sm); /* 24rem (384px) */`
max-w-md	`max-width: var(--container-md); /* 28rem (448px) */`
max-w-lg	`max-width: var(--container-lg); /* 32rem (512px) */`
max-w-xl	`max-width: var(--container-xl); /* 36rem (576px) */`
max-w-2xl	`max-width: var(--container-2xl); /* 42rem (672px) */`
max-w-3xl	`max-width: var(--container-3xl); /* 48rem (768px) */`
max-w-4xl	`max-width: var(--container-4xl); /* 56rem (896px) */`
max-w-5xl	`max-width: var(--container-5xl); /* 64rem (1024px) */`
max-w-6xl	`max-width: var(--container-6xl); /* 72rem (1152px) */`
max-w-7xl	`max-width: var(--container-7xl); /* 80rem (1280px) */`

Sizing

min-height

Utilities for controlling the minimum height of an element.

⌄

Class	Styles
min-h-0	`min-height: 0;`
min-h-1	`min-height: 0.25rem;`
min-h-2	`min-height: 0.5rem;`
min-h-3 – min-h-12	`min-height: 1rem; ... 8rem;`
min-h-full	`min-height: 100%;`
min-h-3xs	`min-height: var(--container-3xs); /* 16rem (256px) */`
min-h-2xs	`min-height: var(--container-2xs); /* 18rem (288px) */`
min-h-xs	`min-height: var(--container-xs); /* 20rem (320px) */`
min-h-sm	`min-height: var(--container-sm); /* 24rem (384px) */`
min-h-md	`min-height: var(--container-md); /* 28rem (448px) */`
min-h-lg	`min-height: var(--container-lg); /* 32rem (512px) */`
min-h-xl	`min-height: var(--container-xl); /* 36rem (576px) */`
min-h-2xl	`min-height: var(--container-2xl); /* 42rem (672px) */`
min-h-3xl	`min-height: var(--container-3xl); /* 48rem (768px) */`
min-h-4xl	`min-height: var(--container-4xl); /* 56rem (896px) */`
min-h-5xl	`min-height: var(--container-5xl); /* 64rem (1024px) */`
min-h-6xl	`min-height: var(--container-6xl); /* 72rem (1152px) */`
min-h-7xl	`min-height: var(--container-7xl); /* 80rem (1280px) */`

Sizing

max-height

Utilities for controlling the maximum height of an element.

⌄

Class	Styles
max-h-0	`max-height: 0;`
max-h-1	`max-height: 0.25rem;`
max-h-2	`max-height: 0.5rem;`
max-h-3 – max-h-12	`max-height: 1rem; ... 8rem;`
max-h-none	`max-height: none;`
max-h-full	`max-height: 100%;`
max-h-3xs	`max-height: var(--container-3xs); /* 16rem (256px) */`
max-h-2xs	`max-height: var(--container-2xs); /* 18rem (288px) */`
max-h-xs	`max-height: var(--container-xs); /* 20rem (320px) */`
max-h-sm	`max-height: var(--container-sm); /* 24rem (384px) */`
max-h-md	`max-height: var(--container-md); /* 28rem (448px) */`
max-h-lg	`max-height: var(--container-lg); /* 32rem (512px) */`
max-h-xl	`max-height: var(--container-xl); /* 36rem (576px) */`
max-h-2xl	`max-height: var(--container-2xl); /* 42rem (672px) */`
max-h-3xl	`max-height: var(--container-3xl); /* 48rem (768px) */`
max-h-4xl	`max-height: var(--container-4xl); /* 56rem (896px) */`
max-h-5xl	`max-height: var(--container-5xl); /* 64rem (1024px) */`
max-h-6xl	`max-height: var(--container-6xl); /* 72rem (1152px) */`
max-h-7xl	`max-height: var(--container-7xl); /* 80rem (1280px) */`

Components

Cards

card

Default card style.

⌄

EXAMPLES

Default Card

Use the card class to create a basic card with subtle border, background, and shadow:

Default Card

This is a default card. It uses a subtle border, background, and shadow.

                
                <div class="card">
                    <h4 class="text-lg font-semibold">Default Card</h4>
                    <p>This is a default card. It uses a subtle border, background, and shadow.</p>
                </div>

Cards

card-outline

Outline card style.

⌄

EXAMPLES

Outline Card

Use the card-outline class to create a card with a primary color border for emphasis:

Outline Card

This card uses a primary color border for emphasis.

                
                <div class="card-outline">
                    <h4 class="text-lg font-semibold">Outline Card</h4>
                    <p>This card uses a primary color border for emphasis.</p>
                </div>

Cards

card-muted

Muted card style.

⌄

EXAMPLES

Muted Card

Use the card-muted class to create a card with a muted background and lighter text:

Muted Card

This card uses a muted background and lighter text for less emphasis.

                
                <div class="card-muted">
                    <h4 class="text-lg font-semibold">Muted Card</h4>
                    <p>This card uses a muted background and lighter text for less emphasis.</p>
                </div>

Form

form

Basic form component with styled inputs and labels.

⌄

EXAMPLES

Basic Form

Use the form class to create a styled form with proper spacing and element styling:

                
                <form class="form">
                    <label>
                        <span class="block mb-1">Email</span>
                        <input type="email" placeholder="you@example.com" required>
                    </label>
                    <label>
                        <span class="block mb-1">Message</span>
                        <textarea rows="3" placeholder="Your message"></textarea>
                    </label>
                    <button type="submit" class="btn-primary">Send</button>
                </form>

Table

table

Styled table component with proper borders and spacing.

⌄

EXAMPLES

Basic Table

Use the table class to create a styled table with proper borders and spacing:

Name	Status	Role
Alice	Active	Admin
Bob	Inactive	User
Charlie	Active	Moderator

                
                <table class="table">
                    <thead>
                        <tr>
                        <th>Name</th>
                        <th>Status</th>
                        <th>Role</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                        <td>Alice</td>
                        <td>Active</td>
                        <td>Admin</td>
                        </tr>
                        <tr>
                        <td>Bob</td>
                        <td>Inactive</td>
                        <td>User</td>
                        </tr>
                        <tr>
                        <td>Charlie</td>
                        <td>Active</td>
                        <td>Moderator</td>
                        </tr>
                    </tbody>
                </table>

Typography

heading

Default styles for heading elements (h1-h6).

⌄

Element	Styles
h1	`font-size: 2.5rem; /* 40px */ font-weight: 700; margin-bottom: 0.5rem;`
h2	`font-size: 2rem; /* 32px */ font-weight: 700; margin-bottom: 0.5rem;`
h3	`font-size: 1.75rem; /* 28px */ font-weight: 600; margin-bottom: 0.5rem;`
h4	`font-size: 1.5rem; /* 24px */ font-weight: 600; margin-bottom: 0.5rem;`
h5	`font-size: 1.25rem; /* 20px */ font-weight: 600; margin-bottom: 0.5rem;`
h6	`font-size: 1rem; /* 16px */ font-weight: 600; margin-bottom: 0.5rem;`

EXAMPLES

Heading Examples

Use heading elements for titles and section headers:

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5

                
                    <h1>Heading Level 1</h1>
                    <h2>Heading Level 2</h2>
                    <h3>Heading Level 3</h3>
                    <h4>Heading Level 4</h4>
                    <h5>Heading Level 5</h5>

Typography

font-size

Utilities for controlling the font size of an element.

⌄

Class	Styles
text-xs	`font-size: var(--text-xs); /* 0.75rem (12px) */ line-height: var(--text-xs-line-height);`
text-sm	`font-size: var(--text-sm); /* 0.875rem (14px) */ line-height: var(--text-sm-line-height);`
text-base	`font-size: var(--text-base); /* 1rem (16px) */ line-height: var(--text-base-line-height);`
text-lg	`font-size: var(--text-lg); /* 1.125rem (18px) */ line-height: var(--text-lg-line-height);`
text-xl	`font-size: var(--text-xl); /* 1.25rem (20px) */ line-height: var(--text-xl-line-height);`
text-2xl	`font-size: var(--text-2xl); /* 1.5rem (24px) */ line-height: var(--text-2xl-line-height);`
text-3xl	`font-size: var(--text-3xl); /* 1.875rem (30px) */ line-height: var(--text-3xl-line-height);`
text-4xl	`font-size: var(--text-4xl); /* 2.25rem (36px) */ line-height: var(--text-4xl-line-height);`
text-5xl	`font-size: var(--text-5xl); /* 3rem (48px) */ line-height: var(--text-5xl-line-height);`
text-6xl	`font-size: var(--text-6xl); /* 3.75rem (60px) */ line-height: var(--text-6xl-line-height);`
text-7xl	`font-size: var(--text-7xl); /* 4.5rem (72px) */ line-height: var(--text-7xl-line-height);`

EXAMPLES

Basic example

Use utilities like text-sm and text-lg to set the font size of an element:

text-sm The quick brown fox jumps over the lazy dog.

text-base The quick brown fox jumps over the lazy dog.

text-lg The quick brown fox jumps over the lazy dog.

text-xl The quick brown fox jumps over the lazy dog.

text-2xl The quick brown fox jumps over the lazy dog.

                
                    <p class="text-sm">The quick brown fox ...</p>
                    <p class="text-base">The quick brown fox ...</p>
                    <p class="text-lg">The quick brown fox ...</p>
                    <p class="text-xl">The quick brown fox ...</p>
                    <p class="text-2xl">The quick brown fox ...</p>

Typography

font-weight

Utilities for controlling the font weight of an element.

⌄

Class	Styles
font-thin	`font-weight: 100;`
font-extralight	`font-weight: 200;`
font-light	`font-weight: 300;`
font-normal	`font-weight: 400;`
font-medium	`font-weight: 500;`
font-semibold	`font-weight: 600;`
font-bold	`font-weight: 700;`
font-extrabold	`font-weight: 800;`
font-black	`font-weight: 900;`

EXAMPLES

Basic example

Use utilities like font-thin and font-bold to set the font weight of an element:

font-light The quick brown fox jumps over the lazy dog.

font-normal The quick brown fox jumps over the lazy dog.

font-medium The quick brown fox jumps over the lazy dog.

font-semibold The quick brown fox jumps over the lazy dog.

font-bold The quick brown fox jumps over the lazy dog.

                
                    <p class="font-light">The quick brown fox ...</p>
                    <p class="font-normal">The quick brown fox ...</p>
                    <p class="font-medium">The quick brown fox ...</p>
                    <p class="font-semibold">The quick brown fox ...</p>
                    <p class="font-bold">The quick brown fox ...</p>

Typography

color

Utilities for controlling the text color of an element.

⌄

Class	Styles
text-black	`color: var(--color-black); /* #000 */`
text-white	`color: var(--color-white); /* #fff */`
text-primary	`color: var(--color-primary);`
text-secondary	`color: var(--color-secondary);`
text-danger	`color: var(--color-danger);`
text-success	`color: var(--color-success);`
text-info	`color: var(--color-info);`
text-dark	`color: var(--color-dark);`
text-light	`color: var(--color-light);`

EXAMPLES

Basic example

Use utilities like text-primary to set the color of an element:

The quick brown fox jumps over the lazy dog.

                    
                        <p class="text-primary">The quick brown fox jumps over the lazy dog.</p>

Styles

Lists

ordered-lists

Default styles for ordered lists.

⌄

EXAMPLES

Default Ordered List

Use the ol tag to create a basic ordered list:

List Item 1
List Item 2
List Item 3
List Item 4
List Item 5

                
                <ol class="text-primary">
                    <li>List Item 1</li>
                    <li>List Item 2</li>
                    <li>List Item 3</li>
                    <li>List Item 4</li>
                    <li>List Item 5</li>
                </ol>

Lists

unordered-lists

Default styles for unordered lists.

⌄

EXAMPLES

Default Unordered List

Use the ul tag to create a basic unordered list:

List Item 1
List Item 2
List Item 3
List Item 4
List Item 5

                
                <ul class="text-primary">
                    <li>List Item 1</li>
                    <li>List Item 2</li>
                    <li>List Item 3</li>
                    <li>List Item 4</li>
                    <li>List Item 5</li>
                </ul>

Links

links

Default styles for links.

⌄

EXAMPLES

Default Link

Use the a tag to create a basic link:

Link

                
                <a href="#" class="text-primary">Link</a>

Links

external-links

Default styles for external links.

⌄

EXAMPLES

Default External Link

Use the a tag to create a basic external link:

External Link

                
                    <a href="https://www.google.com" class="text-primary" target="_blank">External Link</a>

Colors

colors

Default styles for colors.

⌄

EXAMPLES

Colors

Use the bg-primary class to create a basic color:

.bg-primary

.bg-secondary

.bg-danger

.bg-success

.bg-info

                
                    <div class="bg-primary">
                        <p class="text-dark">.bg-primary</p>
                    </div>
                    <div class="bg-secondary">
                        <p class="text-dark">.bg-secondary</p>
                    </div>
                    <div class="bg-danger">
                        <p class="text-dark">.bg-danger</p>
                    </div>
                    <div class="bg-success">
                        <p class="text-dark">.bg-success</p>
                    </div>
                    <div class="bg-info">
                        <p class="text-dark">.bg-info</p>
                    </div>

Buttons

buttons

Default styles for buttons.

⌄

EXAMPLES

Buttons

Use the btn-primary class to create a basic button:

Link Button

                
                    <button class="btn-primary">Click me!</button>
                    <a href="#" class="btn-secondary">Link Button</a>
                    <button class="btn-danger">Click me!</button>
                    <button class="btn-success">Click me!</button>
                    <button class="btn-info">Click me!</button>

Images

images

Default styles for images.

⌄

EXAMPLES

Images

Use the img tag to create a basic image:

                
                    <img src="https://placehold.co/300" alt="Placeholder Image" class="img img-thumbnail">
                    <img src="https://placehold.co/300" alt="Placeholder Image" class="img img-avatar">
                    <img src="https://placehold.co/300" alt="Placeholder Image" class="img img-round">

Borders

Border

border

Default styles for borders.

⌄

EXAMPLES

Borders

Use the section-divider class to create a basic border:

                
                    <div class="section-divider w-full"></div>