📐Layout
container mx-autoCentered container
block / inline-block / hiddenDisplay utilities
flex / grid / inline-flexFlex & grid
flex-col / flex-rowFlex direction
flex-wrap / flex-nowrapWrap behavior
gap-4 / gap-x-4 / gap-y-4Gap utilities
grid-cols-33-column grid
grid-cols-[repeat(auto-fill,...)]Arbitrary value
col-span-2 / row-span-2Cell spanning
↔️Spacing
p-4 / px-4 / py-4Padding (all/x/y)
pt-4 / pr-4 / pb-4 / pl-4Individual sides
m-4 / mx-auto / my-8Margin utilities
mt-4 / mr-4 / mb-4 / ml-4Individual margins
space-x-4 / space-y-4Child spacing
size-4width+height together
Scale: 0.5=2px 1=4px 2=8px 4=16px 8=32pxSpacing scale
⚡Flexbox Utilities
justify-start/center/end/between/aroundjustify-content
items-start/center/end/stretchalign-items
self-auto/start/center/endalign-self
flex-1 / flex-auto / flex-noneFlex shorthand
grow / shrink / grow-0Flex grow/shrink
order-first / order-last / order-{n}Visual order
place-items-centerGrid & flex centering
🔠Typography
text-xs/sm/base/lg/xl/2xl/3xlFont sizes
text-[14px]Arbitrary size
font-thin/light/normal/medium/bold/blackFont weight
font-sans/serif/monoFont family
leading-tight/normal/relaxed/looseLine height
tracking-tight/normal/wide/widerLetter spacing
text-center/left/right/justifyText align
truncate / line-clamp-2Text overflow
uppercase/lowercase/capitalizeText transform
antialiasedFont smoothing
🎨Colors
text-{color}-{shade}Text color e.g. text-blue-500
bg-{color}-{shade}Background e.g. bg-gray-900
border-{color}-{shade}Border color
ring-{color}-{shade}Focus ring color
Shades: 50 100 200 300 400 500 600 700 800 900 950Color scale
text-transparentTransparent text
bg-gradient-to-r from-blue-500 to-purple-500Gradient
opacity-50 / bg-opacity-75Opacity utilities
🔲Borders & Shadows
border / border-2 / border-4Border width
border-{color}Border color
border-solid/dashed/dottedBorder style
rounded / rounded-lg / rounded-fullBorder radius
rounded-{size}: none sm md lg xl 2xl 3xlRadius scale
shadow / shadow-md / shadow-xl / shadow-2xlBox shadow
shadow-{color}-500/50Colored shadow
outline / outline-noneOutline utilities
ring-2 ring-offset-2Focus ring
📏Sizing
w-full / w-screen / w-fitWidth utilities
w-1/2 / w-1/3 / w-2/3Fractional widths
w-[320px]Arbitrary width
h-full / h-screen / h-dvhHeight utilities
min-w-0 / max-w-sm/md/lg/xlMin/max width
aspect-square / aspect-videoAspect ratio
size-full / size-screenSize shorthand (w+h)
📌Positioning
relative / absolute / fixed / stickyPosition
inset-0All offsets to 0
top-0 right-0 bottom-0 left-0Individual offsets
z-0 z-10 z-20 z-50 z-autoZ-index
overflow-hidden / overflow-autoOverflow
isolateCreate stacking context
float-left / float-right / clear-bothFloat utilities
🖱️Interactivity & States
hover:bg-blue-600Hover variant
focus:ring-2Focus variant
active:scale-95Active variant
disabled:opacity-50Disabled variant
group / group-hover:Group hover
peer / peer-checked:Peer state
dark:bg-gray-900Dark mode variant
md:text-xl / lg:flexResponsive breakpoints
cursor-pointer / cursor-not-allowedCursor utilities
select-none / select-allText selection
transition / duration-300 / ease-in-outTransitions
✨Animations & Effects
animate-spinSpin animation
animate-pulsePulse animation
animate-bounceBounce animation
animate-pingPing/ripple animation
animate-noneDisable animation
blur / blur-sm / blur-lgBlur filter
brightness-150 / contrast-125Adjust filter
grayscale / sepia / invertVisual filters
backdrop-blur-mdBackdrop blur
mix-blend-multiplyBlend mode
scale-110 / rotate-45 / translate-y-4Transform utilities