Tailwind CSS Cheatsheet — 100+ Utility Classes with Live Preview

What it does:Padding on all four sides. Scale is 4 = 1rem (16px). The numeric step is 0.25rem so p-1 = 4px, p-2 = 8px, p-4 = 16px, p-8 = 32px.

What it does:Horizontal (left + right) padding and vertical (top + bottom) padding separately. The classic button padding combo.

What it does:Padding on a single side. Variants: pt- (top), pr- (right), pb- (bottom), pl- (left), and the 3.3+ logical-property ps- / pe-.

What it does:Margin on all four sides. Same numeric scale as padding. m-auto centers a block with a defined width. Negative margins use -m-4.

What it does:Horizontal auto margin — centers a block-level element with a defined width inside its container. The standard "center the page" trick.

What it does:Adds horizontal margin between adjacent children (skips the first). The flexbox-friendly way to space items without writing gap on the parent.

What it does:Adds vertical margin between stacked children. Pair with flex flex-col or a plain block container. Replaces "margin-bottom on every item except the last".

What it does:Gap between flex / grid children. Modern alternative to space-x / space-y — works in both axes and does not affect the outer margin of edge children.

What it does:Single pixel padding — the smallest non-zero step. Useful for 1px gradient borders, hair-thin dividers, or precision spacing inside inputs.

What it does:Zero padding — resets browser default or overrides an inherited value. The escape hatch when an upstream component injects padding you do not want.

What it does:Arbitrary value — bracket syntax lets you escape the design scale for a one-off pixel-perfect value. Use sparingly; consistent scale wins long-term.

What it does:Negative margin — pulls the element by the given amount in the opposite direction. Use for overlap effects (avatars, badge offsets, pulling a card up over its header).

What it does:Padding inline-start — the logical-property version of pl- that flips to the right edge in RTL languages. ps- / pe- / ms- / me- are the i18n-safe way to write directional spacing.

What it does:Flips which side space-x adds its margin to — needed when the row is flex-row-reverse, otherwise the gap lands on the wrong edge. Pair: flex flex-row-reverse space-x-4 space-x-reverse.

What it does:Column gap only — sets the horizontal spacing between flex / grid tracks while leaving row spacing untouched. Pair with gap-y- to control the two axes independently.

What it does:scroll-margin-top — reserves space above an anchor target so a sticky header does not cover it after a jump-link scroll. The fix for "#section lands under my fixed navbar".

What it does:text-indent on the first line of a block — classic paragraph indentation. Uses the spacing scale; indent-8 = 2rem. Arbitrary works too: indent-[2ch].

What it does:Width 100% of parent. Other handy widths: w-1/2, w-1/3, w-2/3, w-1/4, w-screen (viewport width), w-min (min-content), w-max (max-content), w-fit.

What it does:Fixed height in the spacing scale. h-10 = 2.5rem (40px). For viewport: h-screen. For min-content: h-min. The 3.4+ size-10 sets w-10 AND h-10 in one class.

What it does:Tailwind 3.4+ shorthand that sets BOTH width and height — saves writing w-8 h-8 a hundred times for avatars, icons, and square buttons.

What it does:Resets min-width to 0. The fix for "flex child refuses to shrink and overflows" — flex items have min-width: auto by default which prevents shrinking past intrinsic content size.

What it does:Max-width cap. Named scale: sm(384), md(448), lg(512), xl(576), 2xl…7xl, prose (65ch — readable line length), full, screen-md (= md breakpoint). The "readable column" goes max-w-prose.

What it does:Width ≈ 65 characters — the typographic sweet spot for body copy. Use on article / blog / docs columns so lines stay readable on wide screens.

What it does:Height = 100vh (full viewport). On mobile Safari this includes the URL bar area, which can cause jumping. The newer h-dvh (dynamic viewport height) is the modern fix.

What it does:Lock aspect ratio. Built-ins: aspect-square (1:1), aspect-video (16:9), aspect-auto. Arbitrary: aspect-[4/3]. Combine with object-cover on an img for crops.

What it does:Fractional width — w-1/2 is 50%, and the scale runs through halves, thirds, quarters, fifths, sixths, and twelfths (w-1/12 … w-11/12). The pre-grid way to split a flex row into proportional columns.

What it does:min-height: 100vh — the page fills at least the full viewport even with little content, so a footer sticks to the bottom. The modern h-dvh-aware variant is min-h-dvh.

What it does:max-height cap — combine with overflow-y-auto to build a scrollable panel that grows with content up to a limit, then scrolls. The standard dropdown / log-viewer pattern.

What it does:width: fit-content — the box shrinks to wrap its content but will not exceed the parent. Handy for centering a pill or auto-sizing a button row with mx-auto w-fit.

What it does:Sets width AND height to 100% in one class (Tailwind 3.4+). The cleanest way to make an img or video fill its positioned wrapper: absolute inset-0 size-full object-cover.

What it does:flex-basis — sets a flex item's initial main-axis size before grow / shrink kick in. basis-1/3 ≈ 33.3%, basis-64 uses the spacing scale, basis-auto reads from content / width.

What it does:Background color from the Tailwind palette. Format: bg-{color}-{shade}. Shades go 50 / 100 / 200 … 900 / 950. Lower = lighter. The default brand cyan.

What it does:Violet from the palette. Pairs well with cyan (cool-cool) for the Aurora aesthetic and with pink/rose (cool-warm) for dramatic gradients.

What it does:Pink — the warm anchor of the Aurora trio (cyan / violet / pink). Use sparingly for accents (CTAs, highlights); flooding a UI in 500 pink fatigues quickly.

What it does:Emerald — the canonical success / positive color. Slightly cooler than green-500; modern UI work tends to prefer emerald over the older "green".

What it does:Amber — the canonical warning color. Pairs with text-amber-50 inside it or text-amber-900 alongside it. More readable than yellow at the same shade.

What it does:Red — destructive / error. Use 500 for buttons, 600 on hover, 50 / 100 for soft alert backgrounds, 700+ for high-contrast text on light backgrounds.

What it does:Foreground color. Slate is the modern neutral — slightly cooler than gray, slightly warmer than zinc. text-slate-400 is the canonical "secondary text" shade on dark UI.

What it does:Plain white text (#ffffff). For "almost white" with a hint of warmth use text-slate-50 or text-zinc-50 — easier on the eyes on long reads.

What it does:Border color. Pairs with a border-width class (border = 1px, border-2 = 2px). Without an explicit width, no border renders. Common: border border-slate-700.

What it does:Color with opacity — the /N suffix sets alpha (0–100). bg-cyan-500/20 = cyan-500 at 20% opacity. Works on bg-, text-, border-, ring-, divide-, and many more.

What it does:Fully transparent background — useful to clear a parent style, build invisible-but-clickable hit zones, or reset on hover.

What it does:Black with 40% opacity — the canonical modal backdrop / scrim shade. Stronger than bg-black/20 (too faint on light pages), softer than bg-black/60 (too dark for hovering toolbars).

What it does:Ring = a "border" rendered as a box-shadow so it does NOT add to layout size. Perfect for focus rings: focus:ring-2 ring-cyan-500. Adjust with ring-offset-2 to inset.

What it does:Divide utilities add a border between adjacent children — divide-y for horizontal lines, divide-x for vertical. Pair with a divide color. No more "last:border-b-0" hacks.

What it does:Arbitrary color via bracket syntax — accept a raw hex / rgb / oklch / var(). Use only when the palette truly does not cover what you need (brand colors, design-token bridges).

What it does:Sky — a brighter, more saturated blue than the muted slate / indigo. Common for info banners and links. Sits between cyan and blue on the palette wheel.

What it does:Zinc — the coolest, most neutral of the five Tailwind grays (gray, slate, zinc, neutral, stone). zinc-800 / 900 make clean dark-UI surfaces with no color cast.

What it does:Gradient text trick — paint a gradient as the background, clip it to the glyph shapes with bg-clip-text, then hide the fill with text-transparent. Pair with bg-gradient-to-r from-X to-X.

What it does:accent-color — tints native form controls (checkbox, radio, range, progress) without custom markup. accent-cyan-500 makes a checked box cyan in one class. Browser-rendered, very lightweight.

What it does:caret-color — sets the blinking text-cursor color inside inputs and textareas. A tiny detail that makes a branded input feel polished. Independent from the text color.

What it does:Styles the placeholder text of an input via the placeholder: variant. placeholder:text-slate-500 keeps hint text dim against real input. Also takes placeholder:italic, placeholder:text-sm.

What it does:SVG fill color — colors the fill of an inline SVG icon from the palette. Pair with stroke-X for outlined icons. fill-current reads the surrounding text color so icons inherit it.

What it does:display: flex on the container. Direct children become flex items, laid out in a row by default with stretch alignment. The starting point for 80% of modern layouts.

What it does:flex-direction: column — stack items vertically. Combine with items-x for cross-axis (now horizontal) alignment, justify-x for main-axis (now vertical) alignment.

What it does:align-items: center — cross-axis centering. In a flex-row container this centers items vertically; in flex-col it centers them horizontally. The most-typed flex class.

What it does:justify-content: space-between — first and last items hug the edges, equal space between the rest. The standard pattern for "logo left, nav right" headers.

What it does:flex: 1 1 0% — grow to fill, shrink if needed, ignore intrinsic size. The "fill the rest" class. flex-auto keeps intrinsic size, flex-initial only shrinks, flex-none never grows or shrinks.

What it does:flex-shrink: 0 — prevents an item from shrinking when the container is too narrow. Apply to icons / labels you do NOT want squished while sibling text truncates.

What it does:flex-wrap: wrap — items overflow to a new line instead of squishing. Pair with gap- for grid-like rows that adapt to width. Default is nowrap.

What it does:Gap between flex items (also works on grid). Same numeric scale as spacing — gap-1 = 4px, gap-4 = 16px. Cleaner than space-x / space-y for most cases.

What it does:align-self override — lets a single flex item ignore the container's items-x. Use to push one button to the bottom of a flex-col card while the rest stay at top.

What it does:Reorders a flex item without changing DOM order. Useful for swapping the visual order of two columns on mobile vs desktop (md:order-first).

What it does:justify-content: center — packs items toward the main-axis center. Combine flex items-center justify-center for the one-line "center a thing both ways" pattern.

What it does:align-items: stretch — the flex default; items grow to fill the cross axis so columns in a row reach equal height. Override with items-start when you do not want the stretch.

What it does:align-content — controls spacing BETWEEN wrapped flex / grid lines (only matters with flex-wrap and multiple rows). Different from items-center, which aligns within a single line.

What it does:flex-grow: 1 — the item expands to absorb leftover main-axis space. grow-0 disables growing. Use grow on the middle column of a toolbar so it eats the gap between fixed-size ends.

What it does:flex-direction: row-reverse — lays items right-to-left while keeping DOM order. Useful for mirroring a layout in RTL contexts or putting the primary action on the right.

What it does:display: grid on the container. Combine with grid-cols-N to define columns. Grid is the right tool for 2D layouts (rows AND columns matter); use flex for 1D.

What it does:Defines 3 equal-width columns (1fr 1fr 1fr). grid-cols-N goes 1–12 by default. For variable widths use grid-cols-[200px_1fr] arbitrary syntax.

What it does:Defines explicit row tracks. Less common than grid-cols because rows usually flow from content; use when you need explicit row sizing (e.g. fixed-height dashboard cells).

What it does:A grid item spans 2 columns. col-span-full spans every column. Combine with grid-cols-3 to make one "wide cell" in a 3-col grid.

What it does:Arbitrary grid template — first column fixed at 200px, second takes the rest. The "sidebar + content" pattern in one class. Underscores stand for spaces.

What it does:Shorthand for align-items + justify-items — every grid cell centers its child both ways. The fastest way to center one item: grid place-items-center.

What it does:Implicit row sizing — every auto-generated row takes 1 fraction of available height (equal). Pairs with explicit grid-cols + variable-height content to keep rows aligned.

What it does:Items flow into columns first instead of rows. Useful for "fill horizontally before vertically" — a left-to-right keyboard layout, a calendar with weeks as columns.

What it does:subgrid — a nested grid adopts the parent grid's column tracks instead of defining its own, so deep children line up to the outer columns. Tailwind 3.4+, modern browsers only.

What it does:Places a grid item to start at line 2 — pair col-start-N with col-end-N for explicit placement instead of relying on auto-flow. col-start-2 col-end-4 spans columns 2 and 3.

What it does:A grid item spans 2 rows tall — the vertical counterpart of col-span. Combine with col-span-2 to make a 2×2 hero cell in a masonry-style dashboard. row-span-full spans every row.

What it does:justify-items — sets the default inline-axis (horizontal) alignment of every item WITHIN its grid cell. Different from justify-content, which distributes the whole track set.

What it does:Responsive auto-grid — columns auto-fill at a minimum 120px each, growing to share the row. No media queries needed; the grid reflows columns purely by available width. auto-fit collapses empty tracks.

What it does:font-size: 0.875rem (14px), line-height: 1.25rem. Scale: xs(12), sm(14), base(16), lg(18), xl(20), 2xl(24), 3xl(30), 4xl(36), 5xl(48), 6xl(60), 7xl(72), 8xl(96), 9xl(128).

What it does:font-weight: 700. Scale: thin(100), extralight(200), light(300), normal(400), medium(500), semibold(600), bold(700), extrabold(800), black(900). The font must actually ship the weight to render it.

What it does:line-height: 1.625 — comfortable for long-form reading. Named scale: none(1), tight(1.25), snug(1.375), normal(1.5), relaxed(1.625), loose(2). For UI use tight–normal; for prose, relaxed.

What it does:letter-spacing scale: tighter(-0.05em), tight(-0.025em), normal(0), wide(0.025em), wider(0.05em), widest(0.1em). Wide / wider on uppercase short text reads cleanly; never on body copy.

What it does:text-align: center. Variants: text-left, text-right, text-justify, text-start (logical), text-end (logical). RTL-friendly forms are start/end.

What it does:text-decoration: underline. Customize with decoration-{color}, decoration-2, underline-offset-4, decoration-wavy. Pair with hover:no-underline for clean link interactions.

What it does:font-style: italic. Pair with not-italic to reset. On most UI fonts italic is heavier visually than a font-weight bump — use sparingly.

What it does:text-transform: uppercase. Set lowercase, capitalize, normal-case for the others. Pair uppercase with tracking-wide for labels / eyebrow text.

What it does:Single-line truncate with ellipsis (overflow: hidden + text-overflow: ellipsis + whitespace: nowrap). Needs an explicit width on the element or a flex / grid parent with min-w-0.

What it does:Multi-line truncate — show N lines then ellipsis. Replaces the old WebKit -webkit-line-clamp hack. line-clamp-none removes the clamp.

What it does:text-wrap: balance — browser balances line lengths for prettier headings (no orphans). Best on h1 / h2 / hero copy. text-pretty is the softer version for body text (modern browsers only).

What it does:Monospace font stack — code, numerics, tabular data. Pair with text-xs / text-sm for code snippets. Custom mono fonts go through your theme (e.g. JetBrains Mono).

What it does:white-space: nowrap — keeps text on a single line, no wrapping. The half of truncate that prevents line breaks; pair with overflow-hidden + text-ellipsis for the full clip. whitespace-pre keeps literal spaces and newlines.

What it does:overflow-wrap: break-word — lets long unbroken strings (URLs, hashes) wrap inside the box instead of overflowing. break-all is more aggressive; break-keep avoids breaking CJK words.

What it does:font-variant-numeric: tabular-nums — every digit takes equal width so columns of numbers line up. Essential for tables, timers, and counters where digits change but should not jitter. lining-nums, slashed-zero are siblings.

What it does:vertical-align: middle — aligns an inline / inline-block element (like an icon) to the middle of the surrounding text. The classic fix for an SVG icon sitting too low next to a label.

What it does:text-decoration-color — colors an underline / line-through independently of the text. Pair with underline decoration-2 underline-offset-4 to build a branded link underline that does not touch the descenders.

What it does:list-style-type: disc — restores bullet points (Tailwind's preflight resets lists to none). Pair with list-inside / list-outside for marker position. list-decimal gives numbered lists.

What it does:-webkit-font-smoothing: antialiased — renders thinner, smoother text on WebKit / macOS, often preferred for light-on-dark UI. subpixel-antialiased restores the default crisper rendering.

What it does:Apply flex-row from medium width up (≥ 768px). Tailwind is MOBILE-FIRST: no prefix = all widths, sm: = ≥ 640, md: = ≥ 768, lg: = ≥ 1024, xl: = ≥ 1280, 2xl: = ≥ 1536.

What it does:Hidden from sm up (≥ 640px) — only visible on screens narrower than 640. To do the opposite ("only show on desktop"), use hidden md:block (hidden by default, shown from md).

What it does:Font size jumps to 2xl from lg width up. Standard responsive heading pattern: text-2xl md:text-3xl lg:text-4xl scales gracefully across devices.

What it does:Switch to 2-column grid on md and up. Stack mobile (no prefix), 2-col tablet (md:), 3-col desktop (lg:) — the canonical responsive card grid.

What it does:Spacing scales with viewport — tight padding on mobile, generous on desktop. Pattern: p-4 sm:p-6 lg:p-8.

What it does:Tailwind 3.2+ "max-" prefix — apply UP TO this breakpoint (mobile-only override). max-sm:flex-col = "be column on screens smaller than sm". Inverts the mobile-first default when you need.

What it does:Chained responsive overrides — vertical padding scales in three steps. Last-prefix wins by specificity? No — by ORDER in CSS. Tailwind generates them so the larger breakpoint comes later.

What it does:Tailwind 4 container queries — mark a parent with @container, then children use @sm: @md: @lg: prefixes that react to the parent's width, not the viewport. Game-changer for components in sidebars.

What it does:print: variant — applies only when the page is printed (or saved as PDF). print:hidden drops nav / buttons from printouts; print:block reveals a print-only header. A real media query, not a breakpoint.

What it does:Orientation variant — portrait: applies when the device is taller than wide, landscape: when wider than tall. Useful for tablets and phones that rotate, independent of pixel breakpoints.

What it does:Arbitrary breakpoint — min-[900px]: fires at any custom min-width without registering a named screen. Use for a one-off breakpoint between md and lg. max-[480px]: is the upper-bound twin.

What it does:Direction variant — rtl: applies under dir="rtl", ltr: under left-to-right. Use to flip a chevron or push text the other way for Arabic / Hebrew layouts without duplicating components.

What it does:CSS @supports feature query as a variant — applies only if the browser supports the named property. supports-[backdrop-filter]: lets you give a frosted look where possible and a solid fallback elsewhere.

What it does:Background changes on mouse hover. Combine: hover:bg-cyan-600 hover:text-white hover:scale-105. On touch devices hover briefly fires after tap — keep that in mind for animations.

What it does:Adds a focus ring (box-shadow). Pair with focus:outline-none to remove the browser default and ring-cyan-500 / ring-offset-2 to style it. For a11y, prefer focus-visible: instead.

What it does:Focus ring ONLY for keyboard focus — mouse clicks do not get the ring, keyboard Tab does. The a11y-correct way to style focus. Should be your default over plain focus:.

What it does:Style on mouse-down (or touch-down). active:scale-95 with a transition gives buttons a satisfying "press" feel without writing keyframes.

What it does:Applies when [disabled] attribute is on the element. Standard combo: disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none.

What it does:Style child when an ancestor with class="group" is hovered. Add `group` to the parent, then `group-hover:` to any descendant. Classic pattern: arrow icon slides on card hover.

What it does:Sibling-based — a sibling element with class="peer" being :checked styles this one. The CSS-only way to build a custom checkbox / toggle: hide native input as peer, style the next div.

What it does:Applies in dark mode. Configure dark mode strategy in CSS: @custom-variant dark (&:where(.dark, .dark *)) for class-based, or media query by default. Then pair every light style with a dark: override.

What it does:Applies when the user has set prefers-reduced-motion. Use to disable transitions / animations for accessibility. Pair with motion-safe: when an animation should ONLY play if the user allows.

What it does:Tailwind 3.2+ — style based on ARIA attribute. Built-ins: aria-checked, aria-disabled, aria-expanded, aria-hidden, aria-pressed, aria-readonly, aria-required, aria-selected. Custom: aria-[sort=ascending]:.

What it does:Style based on data-* attribute value. The bridge to headless UI libraries (Radix, Headless UI, Ariakit) that expose state via data attributes — data-state="open", data-side="bottom".

What it does:Tailwind 3.4+ — :has() parent selector. Style parent when a descendant matches. has-[:checked]:bg-cyan-500/10 = "tint card when its checkbox inside is checked". Modern browsers only.

What it does:Targets the first child via :first-child. Pair first:pt-0 / last:pb-0 to trim the outer padding of a divided list, or first:rounded-t-lg last:rounded-b-lg to round only the ends of a stack.

What it does:Zebra striping — odd: / even: target alternating children via :nth-child. odd:bg-slate-800/40 tints every other table row, no JavaScript and no index bookkeeping needed.

What it does::focus-within on a group — style descendants when any element inside the group container has focus. Pattern: reveal a search-clear button only while the input wrapper holds focus.

What it does:Floating-label trick — peer-placeholder-shown: targets a label sibling while the peer input still shows its placeholder (empty). Combine with peer-focus: to float the label up once the user types.

What it does:Form-validation pseudo-class — invalid: styles an input that fails its HTML constraint (type=email, required, pattern). Pair with valid:border-emerald-500 for live inline feedback, no JS.

What it does::checked variant on the element itself — style a checkbox / radio when it is checked. Combine with appearance-none to fully restyle a native control into a custom toggle.

What it does::target variant — styles the element whose id matches the current URL hash. target:ring-2 ring-cyan-500 highlights the section you just jumped to from a same-page anchor link. Pure CSS, no JS.

What it does:Tailwind 3.4+ not-* variant — negates another variant. not-first:border-t adds a top border to every child except the first, the cleaner replacement for the old [&:not(:first-child)] arbitrary selector.

What it does:box-shadow scale: shadow-sm, shadow (default), shadow-md, shadow-lg, shadow-xl, shadow-2xl, shadow-inner, shadow-none. Color: shadow-cyan-500/40 tints the shadow.

What it does:border-radius scale: rounded-none, rounded-sm(2px), rounded(4), rounded-md(6), rounded-lg(8), rounded-xl(12), rounded-2xl(16), rounded-3xl(24), rounded-full(9999px). Side variants: rounded-t-lg, rounded-l-lg.

What it does:border-radius: 9999px — fully rounded ends. On a square element it makes a circle; on a wide pill it makes a capsule. The avatar / chip / pill standard.

What it does:opacity scale: 0, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 95, 100. opacity-50 = 0.5. Affects the whole element including children — use color/N alpha (bg-cyan-500/50) to tint just one property.

What it does:CSS blur filter. Scale: blur-none, blur-sm(4px), blur(8), blur-md(12), blur-lg(16), blur-xl(24), blur-2xl(40), blur-3xl(64). Use on backgrounds / decorative orbs, not on text.

What it does:Blurs what is BEHIND the element — the iOS / macOS frosted glass look. Pair with bg-white/10 or bg-black/30 for the typical glass card. Performance cost — use sparingly.

What it does:Enables smooth transitions on color-related props. Variants: transition (all), transition-all, transition-colors, transition-opacity, transition-shadow, transition-transform. Add duration-N and ease-N.

What it does:transition-duration in ms. Common scale: 75, 100, 150, 200, 300, 500, 700, 1000. Default if you only write `transition` is 150ms. For UI feedback < 200ms feels snappy; > 400ms feels sluggish.

What it does:Built-in keyframe animation — opacity pulsing. Built-ins: animate-spin, animate-ping, animate-pulse, animate-bounce, animate-none. Custom: define @keyframes + @theme to extend.

What it does:360° rotation loop, 1s linear infinite. The canonical loading spinner — wrap a circle SVG with this class and you have a spinner in one line.

What it does:Colored shadow — the shadow takes a palette tint at the given opacity. shadow-lg shadow-cyan-500/40 gives a glowing card lift on dark UI. Works on any shadow size class.

What it does:ring-offset — inserts a gap (in the ring-offset color, default bg) between the element and its ring, so the ring floats just outside the edge. The polished focus-ring look: ring-2 ring-cyan-500 ring-offset-2 ring-offset-slate-900.

What it does:filter: grayscale(100%) — desaturates an element to black-and-white. Pair with hover:grayscale-0 to color a logo on hover. Other filters: sepia, invert, brightness-N, contrast-N, saturate-N.

What it does:filter: brightness() — scales luminance. brightness-110 lightens 10%, brightness-90 darkens. The cheap, GPU-friendly way to do a hover lift on an image without swapping assets.

What it does:filter: drop-shadow — unlike box-shadow it follows the element's actual alpha shape, so it shadows transparent PNGs and SVG icons correctly. Scale: drop-shadow-sm … drop-shadow-2xl.

What it does:mix-blend-mode — blends an element with what is behind it. screen lightens (great for glow orbs over dark backgrounds), multiply darkens, overlay boosts contrast. Heavy on GPU at full-screen sizes.

What it does:transform: scale — scale-105 grows to 105%, scale-95 shrinks. The hover-lift / press-down standard: hover:scale-105 active:scale-95 transition-transform. Axis variants scale-x-, scale-y- exist.

What it does:transform: rotate — degrees. rotate-45 tilts 45°, -rotate-45 the other way. Combine with transition-transform for spinning chevrons (open/close) and tilted badges. Scale: 0,1,2,3,6,12,45,90,180.

What it does:cursor — the mouse pointer shape. cursor-pointer for clickable non-button elements, cursor-not-allowed for disabled, cursor-grab / cursor-grabbing for drag UIs, cursor-wait during loading.

What it does:position: absolute — taken out of normal flow, positioned relative to the nearest positioned ancestor. Pair with top-N / right-N / bottom-N / left-N or inset-N.

What it does:position: relative — stays in flow but becomes the positioning context for absolute children. The most common pattern: relative parent, absolute decorative children.

What it does:position: fixed — relative to the viewport, ignores scroll. Used for headers, FABs, modals. fixed inset-0 = full-screen overlay.

What it does:position: sticky — element is relative until it hits the offset (top-0 here), then sticks. Needs a scrollable parent. Standard for table headers, section nav, sticky CTAs.

What it does:Shorthand for top-0 right-0 bottom-0 left-0 — stretches an absolute / fixed element to fill its parent / viewport. The "make this a full overlay" class.

What it does:Offsets for positioned elements. Standard pattern for a close button: absolute top-2 right-2. Negative values for overhang: -top-2 -right-2 pulls out of the corner.

What it does:z-index scale: z-0, z-10, z-20, z-30, z-40, z-50, z-auto. Tailwind keeps the stack low on purpose — most pages should not exceed z-50. Modals z-50, dropdowns z-40, sticky headers z-30.

What it does:Clips content outside the box. Pair with rounded-* to make rounded images / cards (otherwise inner content draws over the rounded corners). Also: overflow-auto, overflow-x-scroll.

What it does:Shorthand for left-0 right-0 — stretches a positioned element across the full width while leaving vertical offsets free. Pattern: absolute inset-x-0 bottom-0 for a bottom bar pinned across the parent.

What it does:isolation: isolate — creates a new stacking context so z-index inside this element can not interfere with the rest of the page. The clean fix for "my modal's z-50 fights a sibling's z-index".

What it does:object-fit: cover — an img / video fills its box and crops the overflow, keeping aspect ratio. object-contain fits fully (may letterbox), object-fill stretches. Pair with object-center to control the crop focus.

What it does:float: right — wraps text around a floated element, the classic magazine pull-quote / inline-image layout. Clear floats below with clear-both. Rare in app UI, still useful in prose.

What it does:position: static — the default; the element ignores top / left / z-index and stays in normal flow. Use to explicitly reset a position set higher up (e.g. md:static to undo an absolute on desktop).

What it does:Linear gradient direction. Variants: -t, -tr, -r, -br, -b, -bl, -l, -tl. Pair with from-X to-X (and optional via-X) to set color stops. Tailwind 4 adds angle syntax bg-linear-45.

What it does:Gradient start color. Pair with bg-gradient-to-* and to-X. Optional position: from-cyan-500 from-10% starts the cyan stop at 10% along the line. Same for via- and to-.

What it does:Optional middle stop in a gradient — gives you a three-color blend (from → via → to). Common Aurora gradient: from-cyan-500 via-violet-500 to-pink-500.

What it does:Gradient end color. Combine: bg-gradient-to-r from-cyan-500 to-pink-500. For "fade out to transparent" use to-transparent — useful for fading text edges and image vignettes.

What it does:background-size: cover — image scales to cover the box, may crop. Other: bg-contain (fit fully, may letterbox), bg-auto (natural size). Pair with bg-center for typical hero images.

What it does:Arbitrary background image — bracket syntax accepts any url() / linear-gradient() / radial-gradient() value. Useful for noise textures, dot grids, custom gradients beyond the named scale.

What it does:background-attachment: fixed — the background image stays pinned to the viewport while content scrolls over it, the parallax-hero effect. bg-local scrolls with the element's own content, bg-scroll with the page.

What it does:background-repeat: no-repeat — shows the background image once instead of tiling. bg-repeat-x tiles only horizontally, bg-repeat-round / bg-repeat-space adjust spacing of the tiled copies.

What it does:background-origin — sets the box the background is positioned from: border, padding (default), or content. bg-origin-border lets a background image run under the border, useful for full-bleed gradient borders.

What it does:background-position — anchors the background image. bg-center is the common one; bg-left-top, bg-right-bottom, bg-top etc. cover the nine-point grid. Pair with bg-cover for hero crops that favor a corner.

What it does:Tailwind 4 CSS-first config — declares theme tokens directly in CSS. Replaces tailwind.config.js. Variables generated automatically: --color-X for colors, --font-X for fonts, --spacing-X for spacing scale.

What it does:In-CSS function to read a theme token. theme(colors.cyan.500) returns the cyan-500 value. Use in arbitrary-value contexts: shadow-[0_4px_8px_theme(colors.cyan.500/40)].

What it does:oklch-based palette in Tailwind 4 — wider gamut, smoother gradients, more perceptually uniform brightness. Old hex / rgb values are converted automatically; you write the same class names.

What it does:Container queries built in (no plugin needed). Mark parent with @container, then children use @sm: @md: @lg: that react to the parent's width. Name a container: @container/sidebar lets a deeper child target THIS specific ancestor with @sm/sidebar:.

What it does:Container-query breakpoint — applies when the @container parent reaches ≥ sm (default 640px). Just like sm: but driven by parent width instead of viewport. Game-changer for components reused at different sizes.

What it does:Tailwind 3.4+ size shorthand — sets width AND height. size-8 is exactly w-8 h-8. Saves writing the same number twice for icons, avatars, dots. Half the diff in component PRs.

What it does:Tailwind 4 3D transforms — rotate around X, Y, Z axes. Pair with perspective-N on the parent and transform-3d to enable. translate-z-N moves toward / away from the viewer.

What it does:Tailwind 4 — applies styles via CSS @starting-style. When an element first appears, those styles are the starting frame for the transition. The CSS-native way to animate elements IN without keyframes.

What it does:Tailwind 4 renames bg-gradient-to-r to bg-linear-to-r and adds bg-radial / bg-conic. Angles are now first-class: bg-linear-45 sets a 45° linear gradient. The from-/via-/to- stops work the same.

What it does:Tailwind 4 CSS-variable shorthand — text-(--brand) reads a custom property without the verbose text-[var(--brand)] bracket form. Works for any value slot: bg-(--surface), w-(--sidebar).

What it does:Tailwind 4 not-* variant generalized — negates ANY variant inline. not-hover:opacity-60 dims an element except while hovered, not-supports-[grid]:block gives a non-grid fallback. Cleaner than arbitrary :not() selectors.

What it does:Tailwind 4 wrapper for CSS field-sizing — a textarea auto-grows to fit its content with no JS resize observer. field-sizing-content on a textarea, and it expands as you type. field-sizing-fixed restores normal behavior.

What it does:Tailwind 4 splits inner shadows into their own scale — inset-shadow-sm / inset-shadow / inset-shadow-lg, plus inset-ring-N. They compose independently from the outer shadow-* so a button can have both an outer lift and an inner press.

What it does:Tailwind 4 wrapper for transition-behavior: allow-discrete — lets discrete properties like display animate. Pair with starting:opacity-0 and a display toggle to fade an element in and out of display:none, no JS.

What it does:Tailwind 4 maps color-scheme — scheme-dark / scheme-light tell the browser which native UI (scrollbars, form controls, default colors) to render. Set scheme-dark on a dark page so scrollbars match instead of staying light.