Tailwind CSS v4 Cheatsheet

Extended, grouped reference for Tailwind CSS v4 utility classes — compiled from the official docs so it actually reflects v4, not v3. Need something you can keep on your desk? Try the condensed version.

Changed since v3

The most common source of outdated cheatsheets: these utilities were renamed or changed behavior in v4.

v3v4Note
shadow-smshadow-xs
shadowshadow-sm
drop-shadow-smdrop-shadow-xs
drop-shadowdrop-shadow-sm
blur-smblur-xs
blurblur-sm
backdrop-blur-smbackdrop-blur-xs
backdrop-blurbackdrop-blur-sm
rounded-smrounded-xs
roundedrounded-sm
outline-noneoutline-hidden
ringring-3default ring width is now 1px, not 3px
flex-shrink-*shrink-*
flex-grow-*grow-*
overflow-ellipsistext-ellipsis
decoration-slicebox-decoration-slice
decoration-clonebox-decoration-clone
bg-opacity-*bg-black/50opacity modifiers replace all *-opacity-* utilities
text-opacity-*text-black/50
border-opacity-*border-black/50
ring-opacity-*ring-black/50
!flexflex!important modifier moved to the end of the class
bg-[--brand]bg-(--brand)arbitrary CSS variable syntax
grid-cols-[max-content,auto]grid-cols-[max-content_auto]commas in arbitrary values become underscores

Layout

  • containerFixed max-width at each breakpoint
  • block / inline-block / inlinedisplay
  • flex / inline-flexdisplay: flex
  • grid / inline-griddisplay: grid
  • hiddendisplay: none
  • aspect-square / aspect-video / aspect-[4/3]aspect-ratio
  • columns-2 ... columns-12column-count
  • break-after-column / break-before-page / break-inside-avoidCSS fragmentation breaks
  • box-border / box-contentbox-sizing
  • float-left / float-right / float-nonefloat
  • clear-left / clear-right / clear-bothclear
  • isolate / isolation-autoisolation (stacking context)
  • object-cover / object-contain / object-fill / object-noneobject-fit
  • object-center / object-top / object-left-bottomobject-position
  • overflow-auto / overflow-hidden / overflow-scroll / overflow-visibleoverflow (also overflow-x-*, overflow-y-*)
  • overscroll-auto / overscroll-contain / overscroll-noneoverscroll-behavior
  • static / fixed / absolute / relative / stickyposition
  • inset-0 / top-4 / right-2 / bottom-0 / left-1/2top / right / bottom / left
  • visible / invisible / collapsevisibility
  • z-0 ... z-50 / z-auto / -z-10z-index

Flexbox & Grid

  • flex-row / flex-row-reverse / flex-col / flex-col-reverseflex-direction
  • flex-wrap / flex-wrap-reverse / flex-nowrapflex-wrap
  • flex-1 / flex-auto / flex-initial / flex-noneflex shorthand
  • grow / grow-0flex-grow (was flex-grow-* in v3)
  • shrink / shrink-0flex-shrink (was flex-shrink-* in v3)
  • basis-0 / basis-1/2 / basis-full / basis-64flex-basis
  • order-1 ... order-12 / order-first / order-last / -order-1order
  • grid-cols-1 ... grid-cols-12 / grid-cols-nonegrid-template-columns
  • col-span-2 / col-start-3 / col-end-5 / col-autogrid-column placement
  • grid-rows-1 ... grid-rows-6grid-template-rows
  • row-span-2 / row-start-1 / row-end-3grid-row placement
  • grid-flow-row / grid-flow-col / grid-flow-densegrid-auto-flow
  • auto-cols-auto / auto-cols-min / auto-cols-frgrid-auto-columns
  • auto-rows-auto / auto-rows-min / auto-rows-frgrid-auto-rows
  • gap-4 / gap-x-2 / gap-y-6gap between flex/grid items
  • justify-start / justify-center / justify-between / justify-evenlyjustify-content
  • justify-items-start / justify-items-center / justify-items-stretchjustify-items
  • justify-self-auto / justify-self-endjustify-self
  • content-center / content-between / content-stretchalign-content
  • items-start / items-center / items-baseline / items-stretchalign-items
  • self-auto / self-center / self-stretchalign-self
  • place-content-center / place-items-center / place-self-centerplace-* shorthands

Spacing

  • p-4 / px-4 / py-4 / pt-4 / pr-4 / pb-4 / pl-4padding (all sides / axis / single side)
  • ps-4 / pe-4padding-inline-start / padding-inline-end (logical)
  • m-4 / mx-auto / my-4 / mt-4 / -mt-4margin (negative values allowed with -)
  • ms-4 / me-4margin-inline-start / margin-inline-end (logical)
  • space-x-4 / space-y-4gap between direct children (adds margin between siblings)
  • space-x-reversereverses the direction spacing is applied
  • 0, px, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 72, 80, 96default spacing scale (1 unit = 0.25rem = 4px, so p-4 = 1rem)

Sizing

  • w-4 / w-1/2 / w-full / w-screen / w-fit / w-min / w-maxwidth
  • min-w-0 / min-w-full / min-w-fitmin-width
  • max-w-xs ... max-w-7xl / max-w-full / max-w-prose / max-w-nonemax-width
  • h-4 / h-1/2 / h-full / h-screen / h-dvh / h-svh / h-lvhheight (dvh/svh/lvh = dynamic/small/large viewport units)
  • min-h-0 / min-h-screen / min-h-fullmin-height
  • max-h-full / max-h-screenmax-height
  • size-4 / size-full / size-1/2sets width and height together

Typography

  • font-sans / font-serif / font-monofont-family
  • text-xs ... text-9xlfont-size (each step sets a matching line-height)
  • antialiased / subpixel-antialiasedfont-smoothing
  • italic / not-italicfont-style
  • font-thin ... font-blackfont-weight (100-900)
  • tracking-tighter ... tracking-widestletter-spacing
  • leading-none ... leading-loose / leading-4 ... leading-10line-height
  • line-clamp-1 ... line-clamp-6 / line-clamp-nonetruncate text to N lines
  • list-none / list-disc / list-decimallist-style-type
  • list-inside / list-outsidelist-style-position
  • text-left / text-center / text-right / text-justifytext-align
  • text-red-500 / text-black/50text color (with opacity modifier)
  • underline / overline / line-through / no-underlinetext-decoration-line
  • decoration-red-500 / decoration-2 / decoration-wavytext-decoration color / thickness / style
  • underline-offset-4text-underline-offset
  • uppercase / lowercase / capitalize / normal-casetext-transform
  • truncate / text-ellipsis / text-cliptext-overflow
  • text-wrap / text-nowrap / text-balance / text-prettytext-wrap
  • indent-4 / -indent-4text-indent
  • align-baseline / align-top / align-middle / align-bottomvertical-align
  • whitespace-normal / whitespace-nowrap / whitespace-pre-wrapwhite-space
  • break-normal / break-words / break-all / break-keepword-break / overflow-wrap
  • hyphens-none / hyphens-manual / hyphens-autohyphens
  • content-none / content-['*']content (for ::before / ::after)
  • text-shadow-2xs ... text-shadow-lg / text-shadow-nonetext-shadow (new utility in v4)

Backgrounds

  • bg-fixed / bg-local / bg-scrollbackground-attachment
  • bg-clip-border / bg-clip-padding / bg-clip-content / bg-clip-textbackground-clip
  • bg-red-500 / bg-transparent / bg-black/25background-color (with opacity modifier)
  • bg-none / bg-linear-to-r / bg-radial / bg-conicbackground-image / gradients
  • from-cyan-500 via-blue-500 to-indigo-500gradient color stops
  • bg-origin-border / bg-origin-padding / bg-origin-contentbackground-origin
  • bg-center / bg-top / bg-[center_top_1rem]background-position
  • bg-repeat / bg-no-repeat / bg-repeat-x / bg-repeat-ybackground-repeat
  • bg-auto / bg-cover / bg-containbackground-size

Borders

  • rounded-xs ... rounded-3xl / rounded-fullborder-radius (v4: rounded-sm→rounded-xs, rounded→rounded-sm)
  • rounded-t-lg / rounded-tl-lgborder-radius per side / corner
  • border / border-2 / border-t / border-x-4border-width (default border color is currentColor in v4)
  • border-red-500 / border-black/50border-color
  • border-solid / border-dashed / border-dotted / border-noneborder-style
  • divide-x / divide-y / divide-red-500border between children
  • outline / outline-2 / outline-offset-2outline-width / outline-offset
  • outline-red-500outline-color
  • outline-hidden / outline-none / outline-dashedoutline-style (v4: outline-none→outline-hidden keeps focus ring for a11y)

Effects

  • shadow-xs ... shadow-2xl / shadow-nonebox-shadow (v4: shadow-sm→shadow-xs, shadow→shadow-sm)
  • shadow-red-500/50colored box-shadow
  • opacity-0 ... opacity-100opacity
  • mix-blend-multiply / mix-blend-screen / mix-blend-overlaymix-blend-mode
  • bg-blend-multiply / bg-blend-overlaybackground-blend-mode
  • mask-clip-border / mask-origin-paddingmask-clip / mask-origin
  • mask-linear-to-r / mask-radial / mask-[<url>]mask-image utilities

Filters

  • blur-xs ... blur-3xl / blur-nonefilter: blur (v4: blur-sm→blur-xs, blur→blur-sm)
  • brightness-50 ... brightness-200filter: brightness
  • contrast-50 ... contrast-200filter: contrast
  • drop-shadow-xs ... drop-shadow-2xlfilter: drop-shadow (v4 renamed, see blur)
  • grayscale / grayscale-0filter: grayscale
  • hue-rotate-90 / -hue-rotate-90filter: hue-rotate
  • invert / invert-0filter: invert
  • saturate-50 ... saturate-200filter: saturate
  • sepia / sepia-0filter: sepia
  • backdrop-blur-xs ... backdrop-blur-3xlbackdrop-filter: blur (v4 renamed, see blur)
  • backdrop-brightness-50 / backdrop-contrast-125 / backdrop-opacity-50other backdrop-filter utilities

Tables

  • border-collapse / border-separateborder-collapse
  • border-spacing-2 / border-spacing-x-2border-spacing
  • table-auto / table-fixedtable-layout
  • caption-top / caption-bottomcaption-side

Transitions & Animation

  • transition / transition-all / transition-colors / transition-nonetransition-property
  • duration-75 ... duration-1000transition-duration
  • ease-linear / ease-in / ease-out / ease-in-outtransition-timing-function
  • delay-75 ... delay-1000transition-delay
  • animate-spin / animate-ping / animate-pulse / animate-bounce / animate-noneanimation presets

Transforms

  • scale-0 ... scale-150 / scale-x-50 / scale-y-50scale
  • rotate-0 ... rotate-180 / -rotate-45rotate
  • translate-x-4 / -translate-y-1/2translate
  • skew-x-6 / skew-y-3skew
  • origin-center / origin-top-lefttransform-origin
  • transform-none / transform-gpuforce / disable hardware acceleration
  • perspective-dramatic / perspective-noneperspective
  • backface-visible / backface-hiddenbackface-visibility

Interactivity

  • accent-red-500accent-color (checkboxes, radios, range inputs)
  • appearance-none / appearance-autoappearance
  • caret-red-500caret-color
  • cursor-pointer / cursor-not-allowed / cursor-wait / cursor-grabcursor
  • field-sizing-content / field-sizing-fixedfield-sizing (auto-growing textareas)
  • pointer-events-none / pointer-events-autopointer-events
  • resize / resize-none / resize-x / resize-yresize
  • scroll-auto / scroll-smoothscroll-behavior
  • scroll-m-4 / scroll-p-4scroll-margin / scroll-padding
  • snap-start / snap-center / snap-x / snap-mandatoryscroll-snap utilities
  • touch-auto / touch-none / touch-pan-xtouch-action
  • select-none / select-text / select-all / select-autouser-select
  • will-change-auto / will-change-scroll / will-change-transformwill-change

SVG

  • fill-red-500 / fill-current / fill-nonefill
  • stroke-red-500 / stroke-currentstroke
  • stroke-0 / stroke-1 / stroke-2stroke-width

Accessibility

  • sr-only / not-sr-onlyvisually hide while keeping content for screen readers
  • forced-color-adjust-auto / forced-color-adjust-noneforced-color-adjust (Windows High Contrast Mode)

Responsive breakpoints

  • sm: (≥40rem / 640px)small screens and up
  • md: (≥48rem / 768px)medium screens and up
  • lg: (≥64rem / 1024px)large screens and up
  • xl: (≥80rem / 1280px)extra-large screens and up
  • 2xl: (≥96rem / 1536px)2x extra-large screens and up
  • max-sm: / max-md: / max-lg: / max-xl: / max-2xl:applies below that breakpoint (stack with a lower prefix for a range, e.g. md:max-lg:)
  • min-[475px]: / max-[600px]:arbitrary breakpoint values

Container queries

  • @container / @container/namemark an element as a query container (optionally named)
  • @xs ... @7xl:style based on container width instead of viewport (@sm:flex-row)
  • @max-sm: / @min-[475px]:max-width / arbitrary container query variants
  • @sm/name: / @max-md/name:target a specific named ancestor container

State variants

  • hover: / focus: / active: / visited:interaction states
  • focus-within: / focus-visible:focus states for parent / keyboard-only focus
  • disabled: / required: / invalid: / checked:form states
  • first: / last: / odd: / even: / only:structural pseudo-classes
  • group-hover: / group-focus:style based on a parent with the group class
  • peer-checked: / peer-focus:style based on a sibling with the peer class
  • has-[:checked]: / has-checked::has() — style based on a descendant's state
  • not-hover: / not-disabled::not() — style when a state does NOT apply
  • dark:dark mode (based on prefers-color-scheme or a class strategy)
  • before: / after: / placeholder: / selection: / file:pseudo-elements
  • starting:@starting-style — enter/exit transitions without JS