Typography

Font Size

text-xs | font size: 0.75rem (12px)

text-sm | font size: 0.875rem (14px)

text-base | font size: 1rem (16px)

text-lg | font size: 1.125rem (18px)

text-xl | font size: 1.25rem (20px)

text-2xl | font size: 1.5rem (24px)

text-3xl | font size: 1.875rem (30px)

text-4xl | font size: 2.25rem (36px)

text-5xl | font size: 3rem (48px)

text-6xl | font size: 3.75rem (60px)

text-7xl | font size: 4.5rem (72px)

text-8xl | font size: 6rem (96px)

text-9xl | font size: 8rem (128px)

Font Weight

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

Line Height

leading-none | line-height: 1

leading-tight | line-height: 1.25

leading-snug | line-height: 1.375

leading-normal | line-height: 1.5

leading-relaxed | line-height: 1.625

leading-loose | line-height: 2

leading-3 | line-height: 0.75rem (12px)

leading-4 | line-height: 1rem (16px)

leading-5 | line-height: 1.25rem (20px)

leading-6 | line-height: 1.5rem (24px)

leading-7 | line-height: 1.75rem (28px)

leading-8 | line-height: 2rem (32px)

leading-9 | line-height: 2.25rem (36px)

leading-10 | line-height: 2.5rem (40px)

Flexbox

Container

flex | sets the container as a flex container

inline-flex | sets the container as an inline flex container

flex-row | sets the main axis as horizontal

flex-col | sets the main axis as vertical

flex-wrap | allows the items to wrap if they exceed the container width

flex-nowrap | prevents the items from wrapping

Grid

Grid Container

grid | sets the container as a grid container

inline-grid | sets the container as an inline grid container

Alignment

Justify Content

justify-start | aligns the items to the start of the container

justify-center | aligns the items to the center of the container

justify-end | aligns the items to the end of the container

justify-between | aligns the items with equal space between them

justify-around | aligns the items with equal space around them

Align Items

items-start | aligns the items to the start of the container

items-center | aligns the items to the center of the container

items-end | aligns the items to the end of the container

items-baseline | aligns the items to the baseline of the container

items-stretch | stretches the items to fill the container

Align Content

content-start | aligns the lines to the start of the container

content-center | aligns the lines to the center of the container

content-end | aligns the lines to the end of the container

content-between | aligns the lines with equal space between them

content-around | aligns the lines with equal space around them

content-stretch | stretches the lines to fill the container

Flex Items

flex-grow | allows the item to grow to fill the container

flex-shrink | allows the item to shrink to fit the container

flex-basis | sets the initial size of the item

order | sets the order of the item in the container

align-self | overrides the align-items value for the item

Gap and Spacing

Gap

gap-0 | 0rem (0px)

gap-px | 1px

gap-0.5 | 0.125rem (2px)

gap-1 | 0.25rem (4px)

gap-1.5 | 0.375rem (6px)

gap-2 | 0.5rem (8px)

gap-2.5 | 0.625rem (10px)

gap-3 | 0.75rem (12px)

gap-3.5 | 0.875rem (14px)

gap-4 | 1rem (16px)

gap-5 | 1.25rem (20px)

gap-6 | 1.5rem (24px)

gap-7 | 1.75rem (28px)

gap-8 | 2rem (32px)

gap-9 | 2.25rem (36px)

gap-10 | 2.5rem (40px)

gap-11 | 2.75rem (44px)

gap-12 | 3rem (48px)

gap-14 | 3.5rem (56px)

gap-16 | 4rem (64px)

gap-20 | 5rem (80px)

gap-24 | 6rem (96px)

gap-28 | 7rem (112px)

gap-32 | 8rem (128px)

gap-36 | 9rem (144px)

gap-40 | 10rem (160px)

gap-44 | 11rem (176px)

gap-48 | 12rem (192px)

gap-52 | 13rem (208px)

gap-56 | 14rem (224px)

gap-60 | 15rem (240px)

gap-64 | 16rem (256px)

gap-72 | 18rem (288px)

gap-80 | 20rem (320px)

gap-96 | 24rem (384px)

Spacing

space-x-0 | 0rem (0px)

space-x-px | 1px

space-x-0.5 | 0.125rem (2px)

space-x-1 | 0.25rem (4px)

space-x-1.5 | 0.375rem (6px)

space-x-2 | 0.5rem (8px)

space-x-2.5 | 0.625rem (10px)

space-x-3 | 0.75rem (12px)

space-x-3.5 | 0.875rem (14px)

space-x-4 | 1rem (16px)

space-x-5 | 1.25rem (20px)

space-x-6 | 1.5rem (24px)

space-x-7 | 1.75rem (28px)

space-x-8 | 2rem (32px)

space-x-9 | 2.25rem (36px)

space-x-10 | 2.5rem (40px)

space-x-11 | 2.75rem (44px)

space-x-12 | 3rem (48px)

space-x-14 | 3.5rem (56px)

space-x-16 | 4rem (64px)

space-x-20 | 5rem (80px)

space-x-24 | 6rem (96px)

space-x-28 | 7rem (112px)

space-x-32 | 8rem (128px)

space-x-36 | 9rem (144px)

space-x-40 | 10rem (160px)

space-x-44 | 11rem (176px)

space-x-48 | 12rem (192px)

space-x-52 | 13rem (208px)

space-x-56 | 14rem (224px)

space-x-60 | 15rem (240px)

space-x-64 | 16rem (256px)

space-x-72 | 18rem (288px)

space-x-80 | 20rem (320px)

space-x-96 | 24rem (384px)

Sizing

Width and Height

w-0 | width: 0px

h-px | height: 1px

w-0.5 | width: 0.125rem (2px)

h-1 | height: 0.25rem (4px)

w-1.5 | width: 0.375rem (6px)

h-2 | height: 0.5rem (8px)

w-2.5 | width: 0.625rem (10px)

h-3 | height: 0.75rem (12px)

w-3.5 | width: 0.875rem (14px)

h-4 | height: 1rem (16px)

w-5 | width: 1.25rem (20px)

h-6 | height: 1.5rem (24px)

w-7 | width: 1.75rem (28px)

h-8 | height: 2rem (32px)

w-9 | width: 2.25rem (36px)

h-10 | height: 2.5rem (40px)

w-11 | width: 2.75rem (44px)

h-12 | height: 3rem (48px)

w-14 | width: 3.5rem (56px)

h-16 | height: 4rem (64px)

w-20 | width: 5rem (80px)

h-24 | height: 6rem (96px)

w-28 | width: 7rem (112px)

h-32 | height: 8rem (128px)

w-36 | width: 9rem (144px)

h-40 | height: 10rem (160px)

w-44 | width: 11rem (176px)

h-48 | height: 12rem (192px)

w-52 | width: 13rem (208px)

h-56 | height: 14rem (224px)

w-60 | width: 15rem (240px)

h-64 | height: 16rem (256px)

w-72 | width: 18rem (288px)

h-80 | height: 20rem (320px)

w-96 | width: 24rem (384px)

h-auto | height: auto

w-full | width: 100%

h-screen | height: 100vh

w-svw | width: 100svw

h-lvh | height: 100lvw

w-dvw | width: 100dvw

h-min | height: min-content

w-max | width: max-content

h-fit | height: fit-content

Minimum width/height

min-w-0 | min-width: 0px

min-h-px | min-height: 1px

min-w-0.5 | min-width: 0.125rem (2px)

min-h-1 | min-height: 0.25rem (4px)

min-w-1.5 | min-width: 0.375rem (6px)

min-h-2 | min-height: 0.5rem (8px)

min-w-2.5 | min-width: 0.625rem (10px)

min-h-3 | min-height: 0.75rem (12px)

min-w-3.5 | min-width: 0.875rem (14px)

min-h-4 | min-height: 1rem (16px)

min-w-5 | min-width: 1.25rem (20px)

min-h-6 | min-height: 1.5rem (24px)

min-w-7 | min-width: 1.75rem (28px)

min-h-8 | min-height: 2rem (32px)

min-w-9 | min-width: 2.25rem (36px)

min-h-10 | min-height: 2.5rem (40px)

min-w-11 | min-width: 2.75rem (44px)

min-h-12 | min-height: 3rem (48px)

min-w-14 | min-width: 3.5rem (56px)

min-h-16 | min-height: 4rem (64px)

min-w-20 | min-width: 5rem (80px)

min-h-24 | min-height: 6rem (96px)

min-w-28 | min-width: 7rem (112px)

min-h-32 | min-height: 8rem (128px)

min-w-36 | min-width: 9rem (144px)

min-h-40 | min-height: 10rem (160px)

min-w-44 | min-width: 11rem (176px)

min-h-48 | min-height: 12rem (192px)

min-w-52 | min-width: 13rem (208px)

min-h-56 | min-height: 14rem (224px)

min-w-60 | min-width: 15rem (240px)

min-h-64 | min-height: 16rem (256px)

min-w-72 | min-width: 18rem (288px)

min-h-80 | min-height: 20rem (320px)

min-w-96 | min-width: 24rem (384px)

min-h-auto | min-height: auto

min-w-full | min-width: 100%

min-h-screen | min-height: 100vh

min-w-svw | min-width: 100svw

min-h-lvh | min-height: 100lvw

min-w-dvw | min-width: 100dvw

min-h-min | min-height: min-content

min-w-max | min-width: max-content

min-h-fit | min-height: fit-content

Maximum width/height

max-w-0 | max-width: 0rem

max-h-px | max-height: 1px

max-w-0.5 | max-width: 0.125rem (2px)

max-h-1 | max-height: 0.25rem (4px)

max-w-1.5 | max-width: 0.375rem (6px)

max-h-2 | max-height: 0.5rem (8px)

max-w-2.5 | max-width: 0.625rem (10px)

max-h-3 | max-height: 0.75rem (12px)

max-w-3.5 | max-width: 0.875rem (14px)

max-h-4 | max-height: 1rem (16px)

max-w-5 | max-width: 1.25rem (20px)

max-h-6 | max-height: 1.5rem (24px)

max-w-7 | max-width: 1.75rem (28px)

max-h-8 | max-height: 2rem (32px)

max-w-9 | max-width: 2.25rem (36px)

max-h-10 | max-height: 2.5rem (40px)

max-w-11 | max-width: 2.75rem (44px)

max-h-12 | max-height: 3rem (48px)

max-w-14 | max-width: 3.5rem (56px)

max-h-16 | max-height: 4rem (64px)

max-w-20 | max-width: 5rem (80px)

max-h-24 | max-height: 6rem (96px)

max-w-28 | max-width: 7rem (112px)

max-h-32 | max-height: 8rem (128px)

max-w-36 | max-width: 9rem (144px)

max-h-40 | max-height: 10rem (160px)

max-w-44 | max-width: 11rem (176px)

max-h-48 | max-height: 12rem (192px)

max-w-52 | max-width: 13rem (208px)

max-h-56 | max-height: 14rem (224px)

max-w-60 | max-width: 15rem (240px)

max-h-64 | max-height: 16rem (256px)

max-w-72 | max-width: 18rem (288px)

max-h-80 | max-height: 20rem (320px)

max-w-96 | max-width: 24rem (384px)

max-h-auto | max-height: auto

max-w-full | max-width: 100%

max-h-screen | max-height: 100vh

max-w-svw | max-width: 100svw

max-h-lvh | max-height: 100lvw

max-w-dvw | max-width: 100dvw

max-h-min | max-height: min-content

max-w-max | max-width: max-content

max-h-fit | max-height: fit-content