Tailwind CSS Cheatsheet

Layout

blockDisplay block

inlineDisplay inline

inline-blockDisplay inline-block

flexDisplay flex

inline-flexDisplay inline-flex

gridDisplay grid

inline-gridDisplay inline-grid

contentsDisplay contents - element acts as wrapper only

flow-rootDisplay flow-root - establishes BFC

list-itemDisplay list-item - renders bullet/marker

hiddendisplay: none

staticposition: static (default)

relativeposition: relative

absoluteposition: absolute

fixedposition: fixed

stickyposition: sticky

inset-0top/right/bottom/left: 0

inset-x-0left: 0; right: 0

inset-y-0top: 0; bottom: 0

top-0 / right-0 / bottom-0 / left-0Individual edge set to 0

top-4 / top-8 / top-autotop with scale value or auto

overflow-autoScroll when content overflows

overflow-hiddenClip overflowing content

overflow-scrollAlways show scrollbars

overflow-clipClip content without enabling programmatic scrolling

overflow-visibleContent renders outside bounds

overflow-x-auto / overflow-y-autoAxis-specific overflow

z-0 / z-10 / z-20 / z-30 / z-40 / z-50z-index scale

z-autoz-index: auto

visible / invisiblevisibility: visible / hidden (space preserved)

isolateisolation: isolate - creates stacking context

isolation-autoisolation: auto

float-left / float-right / float-noneFloat element

clear-left / clear-right / clear-both / clear-noneClear floats

object-contain / object-cover / object-fill / object-none / object-scale-downobject-fit values

object-center / object-top / object-bottomobject-position values

Flexbox

flex-rowflex-direction: row (default)

flex-row-reverseflex-direction: row-reverse

flex-colflex-direction: column

flex-col-reverseflex-direction: column-reverse

flex-wrapflex-wrap: wrap

flex-nowrapflex-wrap: nowrap

flex-wrap-reverseflex-wrap: wrap-reverse

justify-startjustify-content: flex-start

justify-endjustify-content: flex-end

justify-centerjustify-content: center

justify-betweenjustify-content: space-between

justify-aroundjustify-content: space-around

justify-evenlyjustify-content: space-evenly

justify-stretchjustify-content: stretch

items-startalign-items: flex-start

items-endalign-items: flex-end

items-centeralign-items: center

items-baselinealign-items: baseline

items-stretchalign-items: stretch

self-auto / self-start / self-end / self-center / self-stretch / self-baselinealign-self on individual item

content-start / content-end / content-center / content-between / content-around / content-evenlyalign-content for multi-line flex

flex-1flex: 1 1 0% - grow/shrink equally

flex-autoflex: 1 1 auto - grow/shrink based on size

flex-initialflex: 0 1 auto - default flex behaviour

flex-noneflex: none - neither grow nor shrink

grow / grow-0flex-grow: 1 / 0

shrink / shrink-0flex-shrink: 1 / 0

basis-0 / basis-full / basis-1/2 / basis-autoflex-basis values

order-first / order-last / order-noneorder: -9999 / 9999 / 0

order-1 … order-12Explicit order values

gap-4gap: 1rem (both axes)

gap-x-4 / gap-y-4Column / row gap

Grid

grid-cols-1 … grid-cols-12grid-template-columns: repeat(N, minmax(0,1fr))

grid-cols-nonegrid-template-columns: none

grid-cols-subgridgrid-template-columns: subgrid (v4)

grid-rows-1 … grid-rows-6grid-template-rows: repeat(N, minmax(0,1fr))

grid-rows-none / grid-rows-subgridNo rows template / subgrid

col-span-1 … col-span-12grid-column: span N / span N

col-span-fullgrid-column: 1 / -1 - full width

col-start-1 … col-start-13 / col-start-autogrid-column-start

col-end-1 … col-end-13 / col-end-autogrid-column-end

row-span-1 … row-span-6 / row-span-fullgrid-row: span N

row-start-1 … row-start-7 / row-start-autogrid-row-start

row-end-1 … row-end-7 / row-end-autogrid-row-end

grid-flow-rowgrid-auto-flow: row

grid-flow-colgrid-auto-flow: column

grid-flow-densegrid-auto-flow: dense

grid-flow-row-dense / grid-flow-col-denserow dense / col dense auto flow

auto-cols-auto / auto-cols-min / auto-cols-max / auto-cols-frgrid-auto-columns values

auto-rows-auto / auto-rows-min / auto-rows-max / auto-rows-frgrid-auto-rows values

place-items-start / place-items-center / place-items-end / place-items-stretchShorthand for align+justify items

place-content-start / place-content-center / place-content-betweenShorthand for align+justify content

place-self-auto / place-self-start / place-self-center / place-self-stretchShorthand for align+justify self

Spacing

p-0 / p-0.5 / p-1 … p-96padding (all sides)

px-4 / py-4Horizontal / vertical padding

pt-4 / pr-4 / pb-4 / pl-4Individual side padding

ps-4 / pe-4Logical padding-inline-start / end

m-0 / m-automargin: 0 / auto

m-0.5 / m-1 … m-96margin scale

-m-4Negative margin

mx-4 / my-4Horizontal / vertical margin

mx-autoCentre block horizontally

mt-4 / mr-4 / mb-4 / ml-4Individual side margin

ms-4 / me-4Logical margin-inline-start / end

space-x-4Horizontal space between children via margin

space-y-4Vertical space between children via margin

space-x-reverse / space-y-reverseReverse direction for RTL or flex-reverse

Scale: 0, 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, 96

Default spacing scale (1 unit = 0.25rem)

Sizing

w-autowidth: auto

w-fullwidth: 100%

w-screenwidth: 100vw

w-svw / w-lvw / w-dvwSmall / large / dynamic viewport width

w-min / w-max / w-fitmin-content / max-content / fit-content

w-0 … w-96Fixed width from spacing scale

w-1/2 / w-1/3 / w-2/3 / w-1/4 / w-3/4Fractional widths

w-1/5 / w-2/5 / w-3/5 / w-4/5Fifth-based fractional widths

h-auto / h-full / h-screenheight: auto / 100% / 100vh

h-svh / h-lvh / h-dvhSmall / large / dynamic viewport height

h-min / h-max / h-fitmin-content / max-content / fit-content

h-0 … h-96Fixed height from spacing scale

size-4Sets both width and height (shorthand)

size-full / size-screen / size-autosize shorthand with keyword

min-w-0 / min-w-full / min-w-min / min-w-max / min-w-fitmin-width values

max-w-xs / max-w-sm / max-w-md / max-w-lg / max-w-xlNamed max-width breakpoints

max-w-2xl … max-w-7xlLarger named max-widths

max-w-full / max-w-min / max-w-max / max-w-fitmax-width keyword values

max-w-prosemax-width: 65ch - optimal reading width

max-w-screen-sm … max-w-screen-2xlmax-width matching breakpoints

min-h-0 / min-h-full / min-h-screen / min-h-svh / min-h-dvhmin-height values

max-h-full / max-h-screen / max-h-svh / max-h-dvh / max-h-96max-height values

Typography

font-sans / font-serif / font-monoFont family stacks

text-xs / text-sm / text-base / text-lg / text-xlFont size scale (0.75rem – 1.125rem)

text-2xl / text-3xl / text-4xl / text-5xlLarger font sizes (1.5rem – 3rem)

text-6xl / text-7xl / text-8xl / text-9xlDisplay sizes (3.75rem – 8rem)

font-thin / font-extralight / font-lightFont weight 100 / 200 / 300

font-normal / font-medium / font-semiboldFont weight 400 / 500 / 600

font-bold / font-extrabold / font-blackFont weight 700 / 800 / 900

leading-none / leading-tight / leading-snugline-height: 1 / 1.25 / 1.375

leading-normal / leading-relaxed / leading-looseline-height: 1.5 / 1.625 / 2

leading-3 … leading-10Fixed line-height from scale

tracking-tighter / tracking-tight / tracking-normalletter-spacing: -0.05em / -0.025em / 0

tracking-wide / tracking-wider / tracking-widestletter-spacing: 0.025em / 0.05em / 0.1em

text-left / text-right / text-center / text-justifytext-align values

text-start / text-endLogical text-align (RTL-aware)

uppercase / lowercase / capitalize / normal-casetext-transform values

italic / not-italicfont-style: italic / normal

underline / overline / line-through / no-underlinetext-decoration-line values

decoration-solid / decoration-double / decoration-dotted / decoration-dashed / decoration-wavytext-decoration-style

decoration-blue-500text-decoration-color

decoration-1 / decoration-2 / decoration-4text-decoration-thickness

underline-offset-1 / underline-offset-2 / underline-offset-4 / underline-offset-8text-underline-offset

antialiased / subpixel-antialiased-webkit-font-smoothing grayscale / auto

truncateoverflow:hidden; text-overflow:ellipsis; whitespace:nowrap

text-ellipsis / text-cliptext-overflow: ellipsis / clip

whitespace-normal / whitespace-nowrap / whitespace-prewhite-space values

whitespace-pre-line / whitespace-pre-wrap / whitespace-break-spacesMore white-space values

break-normal / break-words / break-all / break-keepword-break / overflow-wrap rules

hyphens-none / hyphens-manual / hyphens-autohyphens property

indent-4 / indent-8text-indent

list-none / list-disc / list-decimallist-style-type

list-inside / list-outsidelist-style-position

text-wrap-wrap / text-wrap-nowrap / text-wrap-balance / text-wrap-prettytext-wrap (v4 / modern browsers)

line-clamp-1 … line-clamp-6 / line-clamp-noneMulti-line text truncation

Colours & Backgrounds

text-gray-900 / text-gray-500 / text-gray-100Text colour with shade

text-{colour}-{50|100|200|300|400|500|600|700|800|900|950}Full text colour scale

text-black / text-white / text-transparent / text-current / text-inheritSpecial text colours

bg-blue-500Background colour

bg-{colour}-{50-950}Full background colour scale

bg-transparent / bg-current / bg-black / bg-white / bg-inheritSpecial background colours

bg-nonebackground-image: none

bg-gradient-to-t / bg-gradient-to-tr / bg-gradient-to-rLinear gradient directions

bg-gradient-to-br / bg-gradient-to-b / bg-gradient-to-bl / bg-gradient-to-l / bg-gradient-to-tlMore gradient directions

from-blue-500Gradient start colour

via-purple-500Gradient middle colour

to-pink-500Gradient end colour

from-0% / via-50% / to-100%Gradient stop positions

bg-fixed / bg-local / bg-scrollbackground-attachment

bg-clip-border / bg-clip-padding / bg-clip-content / bg-clip-textbackground-clip

bg-repeat / bg-no-repeat / bg-repeat-x / bg-repeat-y / bg-repeat-round / bg-repeat-spacebackground-repeat

bg-auto / bg-cover / bg-containbackground-size

bg-center / bg-top / bg-bottom / bg-left / bg-rightbackground-position

text-blue-500/75Colour with opacity modifier (v3+)

bg-blue-500/50Background with 50% opacity

fill-blue-500 / stroke-blue-500SVG fill / stroke colour

stroke-1 / stroke-2SVG stroke-width

Borders

borderborder-width: 1px

border-0 / border-2 / border-4 / border-8border-width scale

border-t / border-r / border-b / border-lSingle side border (1px)

border-t-2 / border-x-4Side border with width

border-gray-300 / border-blue-500border-color

border-transparent / border-currentSpecial border colours

border-solid / border-dashed / border-dotted / border-double / border-hidden / border-noneborder-style

rounded-noneborder-radius: 0

rounded-sm / rounded / rounded-md / rounded-lgBorder radius scale

rounded-xl / rounded-2xl / rounded-3xl / rounded-fullLarger border radius values

rounded-t-lg / rounded-r-lg / rounded-b-lg / rounded-l-lgPer-side border radius

rounded-tl-lg / rounded-tr-lg / rounded-br-lg / rounded-bl-lgPer-corner border radius

divide-x / divide-yBorder between children (horizontal / vertical)

divide-x-2 / divide-y-4Divider with width

divide-gray-200 / divide-blue-500Divider colour

divide-solid / divide-dashed / divide-dotted / divide-double / divide-noneDivider style

divide-x-reverse / divide-y-reverseReverse divider for RTL / flex-reverse

ring-0 / ring-1 / ring-2 / ring / ring-4 / ring-8Box shadow ring (outline via shadow)

ring-blue-500Ring colour

ring-insetRender ring inside element

ring-offset-0 / ring-offset-1 / ring-offset-2 / ring-offset-4 / ring-offset-8Ring offset (gap between element and ring)

ring-offset-white / ring-offset-gray-900Ring offset colour

outline-noneRemove default focus outline

outline / outline-dashed / outline-dotted / outline-doubleoutline-style values

outline-blue-500outline-color

outline-1 / outline-2 / outline-4outline-width

outline-offset-0 / outline-offset-2 / outline-offset-4 / outline-offset-8outline-offset

Effects & Filters

shadow-sm / shadow / shadow-md / shadow-lg / shadow-xl / shadow-2xlbox-shadow scale

shadow-innerInset box shadow

shadow-noneRemove box shadow

shadow-blue-500/50Coloured shadow with opacity

opacity-0 / opacity-5 / opacity-10 / opacity-25 / opacity-50 / opacity-75 / opacity-100Opacity scale

blur-none / blur-sm / blur / blur-md / blur-lg / blur-xl / blur-2xl / blur-3xlfilter: blur() scale

brightness-0 / brightness-50 / brightness-75 / brightness-90 / brightness-95 / brightness-100filter: brightness()

brightness-105 / brightness-110 / brightness-125 / brightness-150 / brightness-200Increased brightness values

contrast-0 / contrast-50 / contrast-75 / contrast-100 / contrast-125 / contrast-150 / contrast-200filter: contrast()

grayscale / grayscale-0filter: grayscale(100%) / 0

hue-rotate-0 / hue-rotate-15 / hue-rotate-30 / hue-rotate-60 / hue-rotate-90 / hue-rotate-180filter: hue-rotate()

invert / invert-0filter: invert(100%) / 0

saturate-0 / saturate-50 / saturate-100 / saturate-150 / saturate-200filter: saturate()

sepia / sepia-0filter: sepia(100%) / 0

drop-shadow-sm / drop-shadow / drop-shadow-md / drop-shadow-lg / drop-shadow-xlfilter: drop-shadow() (follows shape)

backdrop-blur-sm … backdrop-blur-3xlbackdrop-filter: blur()

backdrop-brightness-75 / backdrop-brightness-125backdrop-filter: brightness()

backdrop-contrast-75 / backdrop-grayscale / backdrop-hue-rotate-30 / backdrop-invert / backdrop-saturate-200 / backdrop-sepia

Other backdrop-filter utilities

transition-noneNo transition

transition-allTransition all properties

transition-colorsTransition color, background, border, etc.

transition-opacityTransition opacity

transition-shadowTransition box-shadow

transition-transformTransition transform

duration-75 / duration-100 / duration-150 / duration-200 / duration-300transition-duration

duration-500 / duration-700 / duration-1000Longer transition durations

ease-linear / ease-in / ease-out / ease-in-outtransition-timing-function

delay-0 / delay-75 / delay-100 / delay-150 / delay-200 / delay-300 / delay-500 / delay-700 / delay-1000transition-delay

animate-noneanimation: none

animate-spinContinuous 360° rotation

animate-pingPing/ripple effect (notification badges)

animate-pulseFade opacity in/out

animate-bounceVertical bounce

Transforms

scale-0 / scale-50 / scale-75 / scale-90 / scale-95 / scale-100transform: scale()

scale-105 / scale-110 / scale-125 / scale-150Upscale values

scale-x-75 / scale-y-125Axis-specific scale

rotate-0 / rotate-1 / rotate-2 / rotate-3 / rotate-6 / rotate-12 / rotate-45 / rotate-90 / rotate-180transform: rotate()

-rotate-45 / -rotate-90Negative rotation

translate-x-4 / translate-y-4transform: translateX/Y()

translate-x-1/2 / translate-x-fullFractional translate

-translate-x-full / -translate-y-fullNegative translate (useful for off-screen)

skew-x-1 / skew-x-2 / skew-x-3 / skew-x-6 / skew-x-12transform: skewX()

skew-y-1 / skew-y-2 / skew-y-3 / skew-y-6 / skew-y-12transform: skewY()

origin-centertransform-origin: center

origin-top / origin-top-right / origin-right / origin-bottom-rightTransform origin positions

origin-bottom / origin-bottom-left / origin-left / origin-top-leftMore transform origin positions

transform-gpuForce GPU-accelerated transform (translateZ hack)

transform-nonetransform: none - reset all transforms

perspective-none / perspective-dramatic / perspective-near / perspective-normal / perspective-distant3D perspective values (v4)

rotate-x-12 / rotate-y-45 / rotate-z-63D rotation axes (v4)

Interactivity

cursor-auto / cursor-default / cursor-pointerCommon cursor values

cursor-wait / cursor-text / cursor-move / cursor-help / cursor-not-allowedSemantic cursor values

cursor-grab / cursor-grabbingDrag cursor states

cursor-none / cursor-progress / cursor-crosshair / cursor-cellOther cursor values

cursor-col-resize / cursor-row-resize / cursor-all-scrollResize / scroll cursors

cursor-zoom-in / cursor-zoom-outZoom cursors

select-noneuser-select: none - prevent text selection

select-text / select-all / select-autoOther user-select values

resize-none / resize-y / resize-x / resizeresize values for textareas

scroll-auto / scroll-smoothscroll-behavior

scroll-m-4 / scroll-mx-4 / scroll-my-4scroll-margin

scroll-p-4 / scroll-px-4 / scroll-py-4scroll-padding

snap-start / snap-end / snap-center / snap-align-nonescroll-snap-align

snap-mandatory / snap-proximityscroll-snap-type strictness

snap-x / snap-y / snap-both / snap-nonescroll-snap-type axis

snap-always / snap-normalscroll-snap-stop

overscroll-auto / overscroll-contain / overscroll-noneoverscroll-behavior

overscroll-x-auto / overscroll-y-containAxis-specific overscroll

appearance-none / appearance-autoRemove / restore native widget styling

pointer-events-none / pointer-events-autoDisable / enable mouse events

touch-auto / touch-none / touch-pan-x / touch-pan-y / touch-manipulationtouch-action values

will-change-auto / will-change-scroll / will-change-contents / will-change-transformwill-change hints for browser optimisation

caret-transparent / caret-blue-500caret-color (text cursor colour)

accent-blue-500accent-color for checkboxes/radios/range

Variants

hover:bg-blue-600Apply on mouse hover

focus:ring-2Apply on keyboard focus

focus-within:border-blue-500Apply when any child is focused

focus-visible:outline-noneApply on keyboard (not mouse) focus

active:scale-95Apply while element is pressed

visited:text-purple-600Apply to visited links

disabled:opacity-50Apply when element is disabled

checked:bg-blue-500Apply to checked checkboxes/radios

indeterminate:bg-gray-400Apply to indeterminate checkboxes

placeholder-shown:border-gray-300Apply while placeholder is visible

autofill:bg-yellow-50Apply when browser autofills a field

required:border-red-500Apply to required form fields

valid:border-green-500 / invalid:border-red-500Form field validity states

in-range:bg-green-50 / out-of-range:bg-red-50Numeric input range states

read-only:bg-gray-100Apply to read-only inputs

empty:hiddenApply when element has no children

first:mt-0 / last:mb-0First / last child

only:mx-autoOnly child

odd:bg-gray-50 / even:bg-whiteOdd / even children

first-of-type:mt-0 / last-of-type:mb-0First / last of type

target:ring-2Apply when element is URL fragment target

open:rotate-180Apply to open

/

sm: / md: / lg: / xl: / 2xl:Responsive: min-width breakpoints

max-sm: / max-md: / max-lg: / max-xl:Responsive: max-width breakpoints (v4)

dark:bg-gray-900Apply in dark mode

motion-safe:animate-spinApply only if user allows motion

motion-reduce:transition-noneApply when user prefers reduced motion

print:hiddenApply only in print media

portrait:flex-col / landscape:flex-rowApply based on device orientation

group / group-hover:text-blue-500Style children on parent hover - add group to parent

group/name / group-hover/name:Named group for nested groups

peer / peer-checked:blockStyle siblings based on peer state - add peer to sibling

peer/name / peer-focus/name:Named peer for multiple peers

has-[input:checked]:bg-blue-50Style parent based on descendant state

not-[.active]:opacity-50Apply when selector does NOT match

in-[.sidebar]:text-smApply when inside matching ancestor

data-[state=open]:rotate-180Apply based on data-* attribute value

aria-[expanded=true]:bg-blue-100Apply based on aria-* attribute

Arbitrary Values & Important

w-[32px]Arbitrary width value

h-[calc(100vh-4rem)]Arbitrary calc() value

bg-[#ff0000]Arbitrary hex colour

text-[1.2rem]Arbitrary font size

mt-[clamp(1rem,5vw,3rem)]Arbitrary clamp() value

text-[color:var(--my-color)]Arbitrary value with explicit type hint

bg-[url(/img/hero.jpg)]Arbitrary background image URL

[mask-type:alpha]Arbitrary CSS property shorthand

[--my-var:1.5rem]Set a CSS custom property inline

grid-cols-[200px_1fr_auto]Arbitrary grid template

top-[var(--header-height)]Arbitrary CSS variable reference

data-[state=open]:blockArbitrary data-attribute variant

supports-[display:grid]:gridApply when browser supports feature

!m-4Important modifier - adds !important

!text-red-500Force colour with !important

hover:!opacity-100Important on hover variant

@apply & Directives

@import "tailwindcss"v4: single import replaces three @tailwind directives

@tailwind base; @tailwind components; @tailwind utilitiesv3: inject Tailwind layers

@theme { --color-brand: oklch(60% 0.2 250); }v4: define design tokens in CSS

@theme { --font-sans: "Inter", sans-serif; }v4: override default font family

@theme { --spacing-18: 4.5rem; }v4: add custom spacing value

@layer base { h1 { @apply text-3xl font-bold; } }Add to base layer with @apply

@layer components { .btn { @apply px-4 py-2 rounded; } }Define reusable component class

@layer utilities { .tab-4 { tab-size: 4; } }Add custom utility class

@apply flex items-center gap-4;Compose utilities into existing CSS rule

@plugin "@tailwindcss/forms";v4: load an official or third-party plugin

@variant dark (&:where(.dark, .dark *));v4: define a custom variant

@utility container { ... }v4: define a custom utility

@source "../node_modules/my-ui-lib";v4: tell Tailwind to scan additional source

@config "./tailwind.config.js";v4: opt in to a JS config file

v4 Highlights

CSS-first config (no tailwind.config.js)Configure entirely in CSS via @theme {}

@import "tailwindcss"Single import replaces @tailwind base/components/utilities

OKLCH colour paletteAll default colours use oklch() for wider gamut

--color-* / --spacing-* / --font-*Design tokens exposed as CSS custom properties

starting-*starting-style utilities for enter transitions

field-sizing-content / field-sizing-fixedAuto-grow textarea based on content

text-wrap-balance / text-wrap-prettyBetter text wrapping utilities (now standard)

text-shadow-sm / text-shadow / text-shadow-lg / text-shadow-noneBuilt-in text-shadow utilities (previously plugin only)

mask-* utilitiesmask-image, mask-size, mask-position, mask-repeat support

inset-shadow-sm / inset-shadow-mdInset shadow as first-class utility

stretch utilities (items-stretch, justify-stretch)Improved stretch support in grid/flex

max-sm: / max-md: / max-lg:Max-width responsive variants built in

not-*: variantStyle elements that do NOT match a selector

in-*: variantStyle elements inside a matching ancestor

nth-* variantsnth-child() and nth-of-type() variants

Faster engine (Rust-based Oxide)Dramatically faster builds compared to v3

Automatic content detectionv4 scans source files automatically; no content: [] needed

Removed: bg-opacity-*, text-opacity-*Use colour/opacity modifier syntax instead: bg-blue-500/50

Removed: flex-shrink-* / flex-grow-* (v4)Use shrink-* and grow-* instead