CSS

Tailwind CSS Cheat Sheet — Utility Class Reference

The Tailwind utility classes you reach for most, grouped by what they style.

Put it into practice with the matching tool.

Try the layout playground →

Layout & display

block / inline-block / hiddenDisplay type

flex / gridFlexbox or grid container

relative / absolute / fixedPositioning

inset-0Pin to all four edges

z-10Stacking order

overflow-hidden / overflow-autoClip or scroll overflow

Spacing & sizing

p-4 / px-4 / pt-4Padding: all / horizontal / top

m-4 / mx-autoMargin: all / center horizontally

gap-4Gap between flex or grid children

space-y-4Vertical space between children

w-full / w-1/2 / w-screenWidth

h-full / min-h-screenHeight

max-w-2xlConstrain max width (good for text)

Flex & grid

flex-col / flex-rowFlex direction

items-centerAlign items on the cross axis

justify-between / justify-centerDistribute along the main axis

flex-1 / shrink-0Grow to fill / never shrink

flex-wrapAllow wrapping

grid-cols-3Three equal grid columns

col-span-2Span two columns

Typography

text-sm / text-lg / text-2xlFont size

font-medium / font-boldFont weight

text-center / text-rightText alignment

leading-relaxedLine height

tracking-tightLetter spacing

truncate / line-clamp-2Clip overflowing text

Colors & borders

text-neutral-700Text color

bg-white / bg-blue-600Background color

border / border-2Border width

border-neutral-200Border color

rounded-lg / rounded-fullBorder radius

shadow-sm / shadow-lgBox shadow

opacity-50Opacity

Variants

sm: md: lg: xl:Responsive breakpoints (mobile-first)

hover: / focus: / active:Interaction states

dark:Dark mode

disabled:Disabled state

group-hover:React to a parent marked with group

first: / last: / odd:Position-based variants

More cheat sheets

Regex →Git →Markdown →Cron →