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