Home Reference Cheat Sheet Cheat Sheet
Every Tailwind v4 utility family on one scannable page — layout, flexbox, grid, spacing, typography, colour, effects, transforms, variants and breakpoints.
A lookup table, not a tutorial. Each section links to the page that explains the why .
Reading a class name#
md:hover:bg-indigo-600/75
▲ ▲ ▲ ▲ ▲
│ │ │ │ └─ opacity modifier — 75% alpha
│ │ │ └──────────── value — the --color-indigo-600 token
│ │ └─────────────── property — background-color
│ └───────────────────── state variant — :hover
└──────────────────────── responsive variant — @media (width >= 48rem)Syntax Means Example variant:Condition, stacked left to right dark:md:hover:underline- prefixNegative value -mt-4, -rotate-3/nOpacity modifier bg-black/50, text-white/75[…]Arbitrary value top-[117px], grid-cols-[1fr_auto](…)CSS variable shorthand for [var(…)] bg-(--brand)_A space inside an arbitrary value shadow-[0_2px_4px_black]/nameNamed group or peer group-hover/row:opacity-100
Preview Code
< div class = "p-6" >
< button class = "rounded-lg bg-indigo-600/90 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" >
md:hover:bg-indigo-600/75
</ button >
</ div > Layout#
Class CSS / Effect block inline-block inlinedisplay: block / inline-block / inlineflex inline-flex grid inline-gridFlex and grid containers table table-cell table-rowTable display values flow-root contents list-itemNew BFC / no box / list item hiddendisplay: nonestatic relative absolute fixed stickypositioninset-0 inset-x-4 inset-y-2inset shorthandtop-0 right-4 bottom-full left-1/2Physical offsets start-0 end-0Logical offsets, flip in RTL z-0 z-10 z-20 z-30 z-40 z-50 -z-10 z-autoz-indexisolate isolation-autoCreate / clear a stacking context overflow-auto -hidden -clip -visible -scrolloverflow, plus overflow-x-* and overflow-y-*overscroll-contain overscroll-none overscroll-autooverscroll-behaviorscrollbar-thin scrollbar-none scrollbar-gutter-stableScrollbars v4.3 containerwidth: 100% capped at each breakpointcolumns-2 columns-3xs break-inside-avoidMulti-column text object-cover object-contain object-centerReplaced element fit and position box-border box-contentbox-sizingfloat-left float-end clear-bothFloats
Flexbox#
Class CSS / Effect flex-row flex-row-reverse flex-col flex-col-reverseflex-directionflex-wrap flex-wrap-reverse flex-nowrapflex-wrapflex-1 flex-auto flex-initial flex-noneflex shorthandgrow grow-0 shrink shrink-0flex-grow / flex-shrinkbasis-0 basis-1/3 basis-full basis-autoflex-basisitems-start items-center items-end items-baseline items-stretchalign-itemsjustify-start -center -end -between -around -evenlyjustify-contentcontent-start content-center content-betweenalign-contentself-auto self-start self-center self-end self-stretchalign-selfitems-center-safe justify-center-safeSafe alignment — never overflow the start edge v4.1 order-1 order-first order-last order-noneorderplace-items-center place-content-between place-self-endShorthands for both axes
Grid#
Class CSS / Effect grid-cols-3 grid-cols-none grid-cols-subgridgrid-template-columnsgrid-rows-4 grid-rows-subgridgrid-template-rowsgrid-cols-[repeat(auto-fit,minmax(12rem,1fr))]Responsive tracks with no breakpoints col-span-2 col-span-fullgrid-column: span 2col-start-1 col-end-3 row-start-2 row-end-4Explicit placement row-span-2 row-span-fullgrid-rowgrid-flow-row grid-flow-col grid-flow-row-densegrid-auto-flowauto-cols-fr auto-rows-min auto-rows-maxImplicit track sizing gap-4 gap-x-6 gap-y-2gap — works in flex too
Spacing#
Class CSS / Effect p-4 px-6 py-2 pt-1 pr-3 pb-8 pl-0padding — calc(var(--spacing) * n)ps-4 pe-4Logical inline padding, flips in RTL m-4 mx-auto my-8 mt-2 -mt-2margin, negative with a leading -ms-4 me-4 mbs-4 mbe-4Logical margins v4.2 space-x-4 space-y-2 space-x-reverseMargin between children via :not(:last-child) gap-4 gap-x-2 gap-y-6Gutters in flex and grid — prefer over space-* divide-y divide-x-2 divide-gray-200Borders between children indent-8text-indent
The scale is 0.25rem per step: p-1 = 4px, p-4 = 16px, p-8 = 32px. Any integer works — p-13, mt-96 need no configuration.
Sizing#
Class CSS / Effect w-4 w-1/2 w-full w-screen w-autowidthw-min w-max w-fitIntrinsic widths w-dvw w-svw w-lvwDynamic, small and large viewport width h-10 h-full h-screen h-dvh h-svh h-lvhheightsize-10 size-fullwidth and height in one classmin-w-0 min-w-full min-h-0 min-h-screenMinimums — min-w-0 unlocks flex truncation max-w-md max-w-full max-w-none max-h-96Maximums max-w-3xs … max-w-7xlThe --container-* scale, 16rem → 80rem aspect-square aspect-video aspect-3/2 aspect-autoaspect-ratiobasis-1/3flex-basis — sizing along the main axis
Typography#
Class CSS / Effect font-sans font-serif font-monofont-familytext-xs text-sm text-base text-lg … text-9xlfont-size plus a paired line-heighttext-sm/6 text-base/7Font size with an explicit line height font-thin font-light font-normal font-medium font-semibold font-bold font-blackfont-weight 100–900leading-none leading-tight leading-normal leading-relaxed leading-loose leading-7line-heighttracking-tighter tracking-tight tracking-normal tracking-wide tracking-widestletter-spacingtext-left text-center text-right text-justify text-start text-endtext-alignunderline overline line-through no-underlinetext-decoration-linedecoration-2 decoration-dotted decoration-sky-500 underline-offset-4Decoration thickness, style, colour, offset uppercase lowercase capitalize normal-casetext-transformitalic not-italicfont-styletruncateoverflow-hidden text-ellipsis whitespace-nowrapline-clamp-3 line-clamp-noneClamp to N lines with an ellipsis text-wrap text-nowrap text-balance text-prettytext-wrap — balance for headings, pretty for bodywrap-break-word wrap-anywhereBreak long strings v4.1 break-all break-keep whitespace-pre-wrapWord breaking and whitespace list-disc list-decimal list-inside marker:text-gray-400Lists and markers align-middle hyphens-auto content-['—']Vertical alignment, hyphenation, pseudo content tab-4 font-features-*Tab size v4.3 and OpenType features v4.2
Colors#
Group Families Warm red orange amber yellowGreen lime green emerald tealBlue cyan sky blue indigoPurple/pink violet purple fuchsia pink roseNeutral slate gray zinc neutral stoneMuted v4.2 mauve olive mist taupe
Every family has eleven steps: 50 100 200 300 400 500 600 700 800 900 950. Plus black, white, transparent, current and inherit.
Class CSS / Effect text-* bg-* border-* outline-*Text, background, border, outline colour ring-* inset-ring-* shadow-* inset-shadow-*Ring and shadow colour drop-shadow-* text-shadow-*Coloured shadows v4.1 divide-* decoration-* accent-* caret-*Dividers, underlines, form controls, caret fill-* stroke-*SVG from-* via-* to-*Gradient stops placeholder:text-* selection:bg-* marker:text-*Pseudo-element colour scrollbar-thumb-* scrollbar-track-*Scrollbars v4.3 bg-sky-500/10 text-black/75Opacity modifier — any percentage opacity-50Whole-element opacity, children included
Backgrounds & Gradients#
Class CSS / Effect bg-white bg-transparent bg-currentbackground-colorbg-[url(/hero.jpg)] bg-nonebackground-imagebg-cover bg-contain bg-autobackground-sizebg-center bg-top bg-bottom bg-left bg-rightbackground-positionbg-no-repeat bg-repeat bg-repeat-xbackground-repeatbg-fixed bg-local bg-scrollbackground-attachmentbg-clip-text bg-clip-border bg-clip-paddingbackground-clip — text for gradient headlinesbg-origin-border bg-origin-padding bg-origin-contentbackground-originbg-linear-to-r bg-linear-to-br bg-linear-45Linear gradients — renamed from bg-gradient-to-* bg-radial bg-conic bg-conic-180Radial and conic gradients v4 from-cyan-500 via-sky-500 to-blue-600Gradient stop colours from-10% via-30% to-90%Gradient stop positions bg-linear-to-r/oklchInterpolate the gradient in a wider colour space mask-*Gradient and image masks v4.1
Borders & Radius#
Class CSS / Effect border border-0 border-2 border-4 border-8border-width — colour defaults to currentColor in v4border-x border-y border-t-2 border-bPer-axis and per-side widths border-s border-eLogical sides, flip in RTL border-gray-200 border-transparentborder-colorborder-solid -dashed -dotted -double -hidden -noneborder-styledivide-y divide-x-2 divide-dashed divide-gray-200Borders between children rounded-none rounded-xs rounded-sm rounded-md rounded-lg0, 2px, 4px, 6px, 8px rounded-xl rounded-2xl rounded-3xl rounded-4xl rounded-full12px, 16px, 24px, 32px, pill rounded-t-lg rounded-br-md rounded-ss-xlPer side, per corner, logical corner outline outline-2 outline-offset-2 outline-dashedoutline — sits outside the box, no layout shiftoutline-hiddenRemoves the outline but keeps it in forced-colours mode outline-noneoutline-style: none — only with a replacement focus style
Shadows & Rings#
Class CSS / Effect shadow-2xs shadow-xs shadow-sm shadow-mdRising elevation — shadow-sm is the v3 shadow shadow-lg shadow-xl shadow-2xl shadow-noneDropdowns, modals, hero elements shadow-indigo-500/40Coloured shadow with alpha inset-shadow-2xs inset-shadow-xs inset-shadow-sm inset-shadow-noneInner shadows text-shadow-2xs … text-shadow-lg text-shadow-nonetext-shadow v4.1 drop-shadow-xs … drop-shadow-2xlfilter: drop-shadow() — follows alpha edges, use on PNGs and SVGsring ring-2 ring-4 ring-8 ring-0Ring width — ring is 1px in v4, ring-3 matches the v3 ring ring-indigo-500Ring colour — defaults to currentColor in v4 inset-ring inset-ring-2 inset-ring-white/10Ring drawn inside the border box
Filters & Effects#
Class CSS / Effect blur-xs blur-sm blur-md blur-lg blur-xl blur-2xl blur-3xl4, 8, 12, 16, 24, 40, 64px brightness-50 brightness-125filter: brightness()contrast-50 contrast-200filter: contrast()saturate-0 saturate-150filter: saturate()grayscale grayscale-50 sepia invertColour filters hue-rotate-90 -hue-rotate-15filter: hue-rotate()filter-noneClear all filters backdrop-blur-md backdrop-brightness-75 backdrop-saturate-150Filter what is behind the element backdrop-filter-noneClear all backdrop filters opacity-0 opacity-50 opacity-100opacitymix-blend-multiply mix-blend-overlaymix-blend-modebg-blend-screenbackground-blend-mode
Filters compose within one element — blur-sm grayscale applies both.
Transitions & Animation#
Class CSS / Effect transitionColours, opacity, shadow, transform, filter, backdrop-filter transition-all transition-colors transition-opacity transition-shadow transition-transformNarrower property sets transition-noneDisable duration-150 duration-300 duration-500transition-duration — default is 150msdelay-100transition-delayease-linear ease-in ease-out ease-in-out ease-initialtransition-timing-functiontransition-discretetransition-behavior: allow-discrete — animate display changesstarting:opacity-0@starting-style — the entry value v4 animate-spinspin 1s linear infiniteanimate-pingping 1s cubic-bezier(0, 0, 0.2, 1) infiniteanimate-pulsepulse 2s cubic-bezier(0.4, 0, 0.6, 1) infiniteanimate-bouncebounce 1s infiniteanimate-noneanimation: nonemotion-safe: motion-reduce:Respect prefers-reduced-motion will-change-transform will-change-autowill-change — remove once the animation ends
Class CSS / Effect scale-95 scale-105 scale-x-50 scale-y-150scalerotate-45 -rotate-3rotatetranslate-x-4 -translate-y-2 translate-x-1/2translateskew-x-6 skew-y-3skeworigin-center origin-top-left origin-[30%_60%]transform-originperspective-near perspective-normal perspective-distant300px, 500px, 1200px v4 perspective-origin-topperspective-origintransform-3d transform-flattransform-style: preserve-3d / flatrotate-x-30 rotate-y-45 translate-z-8 scale-z-1103D transforms v4 backface-hidden backface-visiblebackface-visibilitytransform-gpu transform-cpu transform-noneCompositing hints and reset zoom-75 zoom-100 zoom-125zoom — scales the layout box too v4.3
Responsive breakpoints#
Mobile first: an unprefixed utility applies everywhere, a prefixed one applies from that width up.
Variant Min width Media query sm:40rem / 640px @media (width >= 40rem)md:48rem / 768px @media (width >= 48rem)lg:64rem / 1024px @media (width >= 64rem)xl:80rem / 1280px @media (width >= 80rem)2xl:96rem / 1536px @media (width >= 96rem)max-md:below 48rem @media (width < 48rem)min-[900px]:arbitrary @media (width >= 900px)
Container query sizes#
Mark an ancestor @container, then size against it instead of the viewport.
Variant Min width Variant Min width @3xs16rem @2xl42rem @2xs18rem @3xl48rem @xs20rem @4xl56rem @sm24rem @5xl64rem @md28rem @6xl72rem @lg32rem @7xl80rem @xl36rem @max-mdbelow 28rem
Name containers when they nest: @container/card then @lg/card:flex.
States & Variants#
Variant Applies when hover:Pointer over the element — wrapped in @media (hover: hover) focus: focus-visible: focus-within:Focused, focus should be shown, a descendant is focused active: visited: target:Pressed, visited link, URL fragment target disabled: enabled: checked: indeterminate:Form control state required: valid: invalid: user-invalid:Validation — prefer user-invalid: placeholder-shown: read-only: autofill:Input content and mode first: last: only: odd: even: empty:Structural position *: **:Direct children / all descendants group-hover: group-focus:React to an ancestor marked group peer-checked: peer-user-invalid:React to an earlier sibling marked peer has-checked: has-[a]:Style a parent from its children not-hover: in-[.sidebar]:Negation and ancestor matching v4 open: inert: details-content:<details>, popovers, inert subtrees v4 before: after: placeholder: selection: marker: file: backdrop:Pseudo-elements aria-expanded: data-[state=open]:Attribute matching rtl: ltr: print:Direction and print supports-[backdrop-filter]:@supports feature query[&_p]:mt-4Arbitrary selector — & is the element, _ is a space
The complete table is on the Variant Reference page.
Dark mode#
Class CSS / Effect dark:bg-gray-900@media (prefers-color-scheme: dark) by defaultscheme-light scheme-dark scheme-light-darkcolor-scheme — fixes native scrollbars and form controls
Switch to a class-driven toggle by redefining the variant:
@import "tailwindcss" ;
@custom-variant dark ( &:where ( .dark , .dark * ) ) ; Accessibility#
Class CSS / Effect sr-onlyVisually hidden, still read by screen readers not-sr-onlyUndo sr-only — pair as sr-only focus:not-sr-only for skip links focus-visible:outline-2Focus ring only when the browser judges one is warranted outline-hiddenHide the outline without breaking forced-colours mode motion-reduce:transition-none@media (prefers-reduced-motion: reduce)motion-safe:animate-bounceOnly animate when motion is welcome contrast-more:border-gray-900@media (prefers-contrast: more)forced-colors:outlineWindows High Contrast mode forced-color-adjust-noneOpt an element out of forced colour substitution aria-hidden:hidden aria-expanded:rotate-180Style from ARIA state, keeping markup and CSS in sync
Renamed and removed in v4#
v3 v4 shadow-sm / shadowshadow-xs / shadow-smdrop-shadow-sm / drop-shadowdrop-shadow-xs / drop-shadow-smblur-sm / blurblur-xs / blur-smrounded-sm / roundedrounded-xs / rounded-smoutline-noneoutline-hiddenringring-3 — bare ring is now 1pxbg-gradient-to-rbg-linear-to-rflex-shrink-* / flex-grow-*shrink-* / grow-*overflow-ellipsistext-ellipsisbg-opacity-50 and friendsbg-black/50 — the opacity modifier
Common mistakes#
Building class names from strings. bg-${color}-500 never reaches the compiler. Map props to complete class names — see Troubleshooting .truncate without min-w-0.min-width: auto and refuses to shrink below its content.Reaching for space-x-* first. gap-* is the better default; space-* exists for cases where gap cannot apply.Assuming border draws grey. In v4 the default border colour is currentColor. Always pair it: border border-gray-200.ring where you meant ring-3.currentColor, not 3px blue.