tailwind-v4-llms.txt

# Tailwind CSS v4

> Tailwind CSS v4 is a utility-first CSS framework that scans source files for complete class name strings and generates only the CSS that is actually used, with zero runtime overhead. Version 4 is a full rewrite: JavaScript config files are replaced by CSS-native `@theme` blocks, all colors move to the OKLCH color space, Lightning CSS handles transforms and browser prefixes automatically, and the entry point changes from three `@tailwind` directives to a single `@import "tailwindcss"`. The recommended integration is a dedicated Vite plugin (`@tailwindcss/vite`). Minimum browser support: Chrome 111, Safari 16.4, Firefox 128. An automated upgrade tool (`npx @tailwindcss/upgrade`) handles roughly 90% of the v3-to-v4 migration.

**Breaking changes LLMs frequently get wrong when generating v4 code:**

- Shadow, blur, rounded, and ring size names shifted one step down — `shadow` → `shadow-sm`, `shadow-sm` → `shadow-xs`, `rounded` → `rounded-sm`, `blur` → `blur-sm`, etc.
- The `!important` modifier moved from prefix to suffix: `flex!` not `!flex`; `hover:bg-red-500!` not `hover:!bg-red-500`
- CSS variables in arbitrary values use parentheses, not brackets: `bg-(--my-var)` not `bg-[--my-var]`
- Variant stacking order reversed to left-to-right: `*:first:pt-0` not `first:*:pt-0`
- `hover:` is now wrapped in `@media (hover: hover)` — it no longer fires on touch-only devices
- Default ring width is 1px (was 3px in v3); use `ring-3` to match v3's `ring`
- Default ring color is `currentColor` (was blue-500 in v3)
- `outline-none` renamed to `outline-hidden`
- Default `border` color is `currentColor` (was gray-200 in v3)
- `@apply` in Vue/Svelte `<style>` blocks requires `@reference "../../app.css"` first
- `tailwind.config.js` is no longer auto-detected — must use `@config "../../tailwind.config.js"` explicitly
- `@tailwind base/components/utilities` directives are removed — use `@import "tailwindcss"` only
- Commas in arbitrary values no longer auto-convert to spaces — use underscores: `grid-cols-[1fr_auto]`
- CSS preprocessors (Sass, Less, Stylus) are not supported in v4

## Getting Started

- [Installation](https://tailwindcss.com/docs/installation): Vite plugin setup (recommended with `@tailwindcss/vite`), PostCSS plugin, standalone CLI, and Play CDN — step-by-step for each integration method with code examples for all five approaches
- [Editor Setup](https://tailwindcss.com/docs/editor-setup): Tailwind CSS IntelliSense for VS Code (autocomplete, linting, hover previews, syntax highlighting), official Prettier plugin for automatic class-sort ordering, and built-in support in Zed, Cursor, and JetBrains IDEs (WebStorm, PhpStorm)
- [Compatibility](https://tailwindcss.com/docs/compatibility): Browser minimums (Chrome 111, Safari 16.4, Firefox 128+); why CSS preprocessors (Sass, Less, Stylus), CSS Modules, and Vue/Svelte/Astro `<style>` blocks are incompatible or strongly discouraged in v4; what Tailwind replaces them with
- [Upgrade Guide](https://tailwindcss.com/docs/upgrade-guide): All breaking changes from v3→v4 — renamed utilities, changed defaults (ring, border, outline, hover), new syntax (`@import`, `!` suffix, `()` for CSS vars), variant stacking order, the `@utility` API replacing `@layer utilities`, and the `npx @tailwindcss/upgrade` automated migration tool

## Core Concepts

- [Styling with Utility Classes](https://tailwindcss.com/docs/styling-with-utility-classes): The utility-first philosophy — composing single-purpose classes directly in markup instead of writing custom CSS; why utility classes outperform inline styles (state variants, media queries, design constraints); managing duplication with loops, components, and `@layer components`; the `!` important modifier, prefix option, and arbitrary values with `[...]` and `[--property:value]`
- [Hover, Focus, and Other States](https://tailwindcss.com/docs/hover-focus-and-other-states): Every variant Tailwind ships — pseudo-classes (hover, focus, active, checked, disabled, nth-child, has, not, user-valid, user-invalid, details-content), pseudo-elements (before, after, placeholder, marker, selection, backdrop, file), group/peer parent-sibling variants with named groups (`group/{name}`, `peer/{name}`), implicit `in-[...]` variant, media/feature query variants (dark, sm/md/lg, motion-reduce, forced-colors, pointer-fine, starting), ARIA attribute variants, data-attribute variants, child selectors (`*`, `**`), and arbitrary variants with `[&...]`
- [Responsive Design](https://tailwindcss.com/docs/responsive-design): Mobile-first breakpoint system (sm=40rem, md=48rem, lg=64rem, xl=80rem, 2xl=96rem); `max-*` variants for upper-bounded ranges; arbitrary breakpoints with `min-[...]`/`max-[...]`; container queries with `@container`, `@container-size`, named containers, and `@min-[...]`/`@max-[...]`; customizing and replacing breakpoints via `--breakpoint-*` in `@theme`
- [Dark Mode](https://tailwindcss.com/docs/dark-mode): Three strategies — automatic via `prefers-color-scheme` (default, no config needed), class-based manual toggle (`@custom-variant dark (&:where(.dark, .dark *))`), data-attribute toggle; three-way light/dark/system toggle pattern using `localStorage` and `window.matchMedia`
- [Theme Variables](https://tailwindcss.com/docs/theme): The `@theme` directive defines design tokens that both become CSS custom properties AND generate utility classes; namespace conventions (--color-*, --font-*, --spacing, --radius-*, --shadow-*, --breakpoint-*, --container-*, etc.); extending vs replacing defaults; `@theme inline` for CSS variable composition; `@theme static` to force generation; sharing theme files across monorepos
- [Colors](https://tailwindcss.com/docs/colors): 24 color families × 11 shades in OKLCH for better perceptual uniformity; all 16+ color utility categories (bg, text, border, shadow, ring, inset-ring, inset-shadow, fill, stroke, accent, caret, scrollbar-thumb/track, outline); opacity modifiers via `/` syntax (`bg-sky-500/50`, `bg-pink-500/[71.37%]`, `bg-cyan-400/(--my-alpha)`); customizing, overriding, and disabling colors via `--color-*` in `@theme`
- [Adding Custom Styles](https://tailwindcss.com/docs/adding-custom-styles): Every extension method — `@theme` for design tokens, arbitrary values `[...]` and arbitrary properties `[mask-type:luminance]` for one-offs, `@layer base` for element defaults, `@layer components` for reusable classes, `@variant` to apply variants inside custom CSS, `@utility` for custom utilities that work with all variants (including functional `*` patterns with `--value()`, `--modifier()`, types, bare values, arbitrary values, fractions), `@custom-variant` for custom selectors
- [Detecting Classes in Source Files](https://tailwindcss.com/docs/detecting-classes-in-source-files): How Tailwind scans as plain text with no interpolation awareness — complete class names must appear as static strings; what is excluded by default (gitignored files, node_modules, binary files, CSS, lock files); `@source` to add paths for external Tailwind libraries; `source(none)` + explicit `@source` for multi-stylesheet projects; `@source inline()` for safelisting with brace expansion ranges; `@source not inline()` to exclude specific utilities
- [Functions and Directives](https://tailwindcss.com/docs/functions-and-directives): Full reference — directives (@import, @theme, @source, @utility, @variant, @custom-variant, @apply, @reference with subpath import support), functions (--alpha() for color opacity via color-mix, --spacing() for theme-scale values), and v3 compatibility directives (@config, @plugin, theme() dot-notation)

## Base Styles

- [Preflight](https://tailwindcss.com/docs/preflight): Opinionated CSS reset built on modern-normalize — removes all margins/padding, sets `box-sizing: border-box`, resets `border` to `0 solid` (so `border` class only needs to set width), unstyled headings and lists (accessibility note: add `role="list"`), block-level images with `max-width: 100%`; how to extend via `@layer base` or disable by importing Tailwind parts individually

## Utility Reference — Layout

- [aspect-ratio](https://tailwindcss.com/docs/aspect-ratio): CSS `aspect-ratio` property — aspect-square (1/1), aspect-video (16/9), arbitrary aspect-[4/3]
- [columns](https://tailwindcss.com/docs/columns): CSS multi-column layout — column count (columns-1 through columns-12) and width (columns-xs through columns-7xl)
- [break-after](https://tailwindcss.com/docs/break-after): Column/page break behavior after an element (auto, avoid, all, avoid-page, page, left, right, column)
- [break-before](https://tailwindcss.com/docs/break-before): Column/page break behavior before an element
- [break-inside](https://tailwindcss.com/docs/break-inside): Whether a column/page break can occur inside an element (auto, avoid, avoid-page, avoid-column)
- [box-decoration-break](https://tailwindcss.com/docs/box-decoration-break): How backgrounds and borders render across line/column breaks (slice vs clone)
- [box-sizing](https://tailwindcss.com/docs/box-sizing): box-border (border-box, Preflight default) vs box-content (content-box)
- [display](https://tailwindcss.com/docs/display): All display values — block, inline-block, inline, flex, inline-flex, grid, inline-grid, table, table-cell, hidden, and more
- [float](https://tailwindcss.com/docs/float): Float left, right, start, end, none for text wrapping
- [clear](https://tailwindcss.com/docs/clear): Clear floats — left, right, both, start, end, none
- [isolation](https://tailwindcss.com/docs/isolation): Create a new stacking context (`isolate`) or remove it (`isolation-auto`)
- [object-fit](https://tailwindcss.com/docs/object-fit): How replaced elements (img, video) scale to fit — contain, cover, fill, none, scale-down
- [object-position](https://tailwindcss.com/docs/object-position): Alignment of replaced element content within its container box
- [overflow](https://tailwindcss.com/docs/overflow): Overflow behavior — visible, hidden, scroll, auto, clip — controllable per axis (overflow-x, overflow-y)
- [overscroll-behavior](https://tailwindcss.com/docs/overscroll-behavior): Scroll chaining at container boundaries — auto, contain (no chaining), none (no chaining + no bounce)
- [position](https://tailwindcss.com/docs/position): static, fixed, absolute, relative, sticky
- [top / right / bottom / left](https://tailwindcss.com/docs/top-right-bottom-left): Inset utilities using spacing scale plus auto, full, 1/2; per-axis (inset-x, inset-y) and logical (inset-inline, inset-block)
- [visibility](https://tailwindcss.com/docs/visibility): visible, invisible (hidden but retains space and is focusable), collapse (for table rows/columns)
- [z-index](https://tailwindcss.com/docs/z-index): Stacking order — 0, 10, 20, 30, 40, 50, auto, and arbitrary values; supports negative values

## Utility Reference — Flexbox & Grid

- [flex-basis](https://tailwindcss.com/docs/flex-basis): Initial main-size of flex items — spacing scale, fractions (basis-1/4), full, auto, content, arbitrary
- [flex-direction](https://tailwindcss.com/docs/flex-direction): flex-row, flex-col, and their reverse variants
- [flex-wrap](https://tailwindcss.com/docs/flex-wrap): flex-wrap, flex-nowrap, flex-wrap-reverse
- [flex](https://tailwindcss.com/docs/flex): Shorthand — flex-1 (1 1 0%), flex-auto (1 1 auto), flex-none (0 0 auto), flex-initial (0 1 auto)
- [flex-grow](https://tailwindcss.com/docs/flex-grow): grow (flex-grow: 1), grow-0 (flex-grow: 0), arbitrary values
- [flex-shrink](https://tailwindcss.com/docs/flex-shrink): shrink (flex-shrink: 1), shrink-0 (flex-shrink: 0)
- [order](https://tailwindcss.com/docs/order): Visual order of flex/grid items — first (-9999), last (9999), none (0), 1–12, arbitrary
- [grid-template-columns](https://tailwindcss.com/docs/grid-template-columns): Grid column count (grid-cols-1 through grid-cols-12), subgrid (grid-cols-subgrid), none, and arbitrary
- [grid-column](https://tailwindcss.com/docs/grid-column): Column span (col-span-1 through col-span-12), start/end placement, col-full, auto
- [grid-template-rows](https://tailwindcss.com/docs/grid-template-rows): Grid row count (grid-rows-1 through grid-rows-12), subgrid, none, arbitrary
- [grid-row](https://tailwindcss.com/docs/grid-row): Row span and start/end placement for grid items
- [grid-auto-flow](https://tailwindcss.com/docs/grid-auto-flow): How auto-placed items flow — row (default), column, dense, row-dense, col-dense
- [grid-auto-columns](https://tailwindcss.com/docs/grid-auto-columns): Size of implicitly created columns — auto, min, max, fr, arbitrary
- [grid-auto-rows](https://tailwindcss.com/docs/grid-auto-rows): Size of implicitly created rows
- [gap](https://tailwindcss.com/docs/gap): Spacing between grid/flex items using spacing scale; gap-x and gap-y for per-axis control
- [justify-content](https://tailwindcss.com/docs/justify-content): Main-axis alignment — start, end, center, between, around, evenly, stretch, normal, baseline
- [justify-items](https://tailwindcss.com/docs/justify-items): Inline-axis alignment of all grid items within their cells
- [justify-self](https://tailwindcss.com/docs/justify-self): Inline-axis alignment of a single grid item
- [align-content](https://tailwindcss.com/docs/align-content): Cross-axis distribution of wrapped flex lines or extra grid space
- [align-items](https://tailwindcss.com/docs/align-items): Cross-axis alignment of all flex/grid items — stretch (default), start, end, center, baseline
- [align-self](https://tailwindcss.com/docs/align-self): Cross-axis alignment override for a single flex/grid item
- [place-content](https://tailwindcss.com/docs/place-content): Shorthand for align-content + justify-content
- [place-items](https://tailwindcss.com/docs/place-items): Shorthand for align-items + justify-items
- [place-self](https://tailwindcss.com/docs/place-self): Shorthand for align-self + justify-self

## Utility Reference — Spacing

- [padding](https://tailwindcss.com/docs/padding): Padding on all sides (p-*), per axis (px-*, py-*), and per side (pt, pr, pb, pl, ps, pe) using spacing scale where 1 unit = 0.25rem
- [margin](https://tailwindcss.com/docs/margin): Margin on all sides, per axis, per side; negative margins (-m-*); auto margins (mx-auto); logical properties (ms, me)

## Utility Reference — Sizing

- [width](https://tailwindcss.com/docs/width): Element width — spacing scale, fractions (w-1/2, w-1/3), screen (w-screen), viewport units (w-svw/dvw/lvw), intrinsic sizing (w-fit, w-max, w-min, w-auto)
- [min-width](https://tailwindcss.com/docs/min-width): Minimum width — 0, full, min, max, fit, and arbitrary values
- [max-width](https://tailwindcss.com/docs/max-width): Maximum width — named T-shirt sizes (max-w-sm through max-w-7xl), max-w-prose (65ch), max-w-screen-*, max-w-none
- [height](https://tailwindcss.com/docs/height): Element height — spacing scale, screen (h-screen), dynamic viewport units (h-dvh/svh/lvh), fit/max/min
- [min-height](https://tailwindcss.com/docs/min-height): Minimum height constraints including dynamic viewport units
- [max-height](https://tailwindcss.com/docs/max-height): Maximum height constraints
- [inline-size](https://tailwindcss.com/docs/inline-size): Logical equivalent of width (horizontal in LTR)
- [min-inline-size](https://tailwindcss.com/docs/min-inline-size): Minimum logical inline-size
- [max-inline-size](https://tailwindcss.com/docs/max-inline-size): Maximum logical inline-size
- [block-size](https://tailwindcss.com/docs/block-size): Logical equivalent of height (vertical in LTR)
- [min-block-size](https://tailwindcss.com/docs/min-block-size): Minimum logical block-size
- [max-block-size](https://tailwindcss.com/docs/max-block-size): Maximum logical block-size

## Utility Reference — Typography

- [font-family](https://tailwindcss.com/docs/font-family): Font stack utilities (font-sans, font-serif, font-mono) extending or replacing defaults via `--font-*` in `@theme`
- [font-size](https://tailwindcss.com/docs/font-size): Text size scale (text-xs=0.75rem through text-9xl=8rem) — each size also sets a default line-height
- [font-smoothing](https://tailwindcss.com/docs/font-smoothing): antialiased (grayscale) and subpixel-antialiased rendering
- [font-style](https://tailwindcss.com/docs/font-style): italic and not-italic
- [font-weight](https://tailwindcss.com/docs/font-weight): font-thin (100) through font-black (900)
- [font-stretch](https://tailwindcss.com/docs/font-stretch): Variable font width axis — ultra-condensed through ultra-expanded and arbitrary percentages
- [font-variant-numeric](https://tailwindcss.com/docs/font-variant-numeric): OpenType numeric features — ordinal, slashed-zero, lining-nums, oldstyle-nums, tabular-nums, proportional-nums
- [font-feature-settings](https://tailwindcss.com/docs/font-feature-settings): Raw `font-feature-settings` CSS property via arbitrary values
- [letter-spacing](https://tailwindcss.com/docs/letter-spacing): Tracking — tighter (-0.05em) through widest (0.1em) and arbitrary
- [line-clamp](https://tailwindcss.com/docs/line-clamp): Truncate multiline text to N lines with ellipsis — line-clamp-1 through line-clamp-6 and arbitrary
- [line-height](https://tailwindcss.com/docs/line-height): Leading — none (1) through loose (2), numeric scale (leading-3 through leading-10), and arbitrary
- [list-style-image](https://tailwindcss.com/docs/list-style-image): Custom image as list bullet via arbitrary URL
- [list-style-position](https://tailwindcss.com/docs/list-style-position): list-inside vs list-outside bullet placement
- [list-style-type](https://tailwindcss.com/docs/list-style-type): list-disc, list-decimal, list-none, and arbitrary values
- [text-align](https://tailwindcss.com/docs/text-align): left, center, right, justify, start, end
- [color](https://tailwindcss.com/docs/color): Text color using the full palette with `/opacity` modifier
- [text-decoration-line](https://tailwindcss.com/docs/text-decoration-line): underline, overline, line-through, no-underline
- [text-decoration-color](https://tailwindcss.com/docs/text-decoration-color): Decoration line color
- [text-decoration-style](https://tailwindcss.com/docs/text-decoration-style): solid, double, dotted, dashed, wavy
- [text-decoration-thickness](https://tailwindcss.com/docs/text-decoration-thickness): auto, from-font, 0, 1, 2, 4, 8, arbitrary
- [text-underline-offset](https://tailwindcss.com/docs/text-underline-offset): Gap between text baseline and underline
- [text-transform](https://tailwindcss.com/docs/text-transform): uppercase, lowercase, capitalize, normal-case
- [text-overflow](https://tailwindcss.com/docs/text-overflow): truncate (overflow hidden + ellipsis + nowrap), text-ellipsis, text-clip
- [text-wrap](https://tailwindcss.com/docs/text-wrap): wrap, nowrap, balance (even line lengths), pretty (avoids orphaned words)
- [text-indent](https://tailwindcss.com/docs/text-indent): First-line indentation using spacing scale
- [tab-size](https://tailwindcss.com/docs/tab-size): Width of tab characters in preformatted text
- [vertical-align](https://tailwindcss.com/docs/vertical-align): Inline element vertical alignment — baseline, top, middle, bottom, text-top, text-bottom, sub, super
- [white-space](https://tailwindcss.com/docs/white-space): Whitespace handling — normal, nowrap, pre, pre-line, pre-wrap, break-spaces
- [word-break](https://tailwindcss.com/docs/word-break): break-normal, break-all (break anywhere), break-keep (CJK-aware)
- [overflow-wrap](https://tailwindcss.com/docs/overflow-wrap): wrap, anywhere, normal — where long words can break
- [hyphens](https://tailwindcss.com/docs/hyphens): none, manual (only at `&shy;`), auto (browser hyphenation)
- [content](https://tailwindcss.com/docs/content): CSS `content` property for `before:`/`after:` pseudo-elements

## Utility Reference — Backgrounds

- [background-attachment](https://tailwindcss.com/docs/background-attachment): bg-fixed (parallax), bg-local (scrolls with element), bg-scroll (scrolls with viewport)
- [background-clip](https://tailwindcss.com/docs/background-clip): bg-clip-border, bg-clip-padding, bg-clip-content, bg-clip-text (gradient text technique)
- [background-color](https://tailwindcss.com/docs/background-color): Full palette with `/opacity` modifier
- [background-image](https://tailwindcss.com/docs/background-image): Gradient utilities (`bg-linear-to-r`, `from-*`, `via-*`, `to-*`), conic/radial gradients, bg-none, arbitrary URLs
- [background-origin](https://tailwindcss.com/docs/background-origin): bg-origin-border, bg-origin-padding, bg-origin-content
- [background-position](https://tailwindcss.com/docs/background-position): bg-center, bg-top, bg-bottom, bg-left, bg-right, bg-left-top, etc.
- [background-repeat](https://tailwindcss.com/docs/background-repeat): bg-repeat, bg-no-repeat, bg-repeat-x, bg-repeat-y, bg-repeat-round, bg-repeat-space
- [background-size](https://tailwindcss.com/docs/background-size): bg-auto, bg-cover, bg-contain, arbitrary sizes

## Utility Reference — Borders

- [border-radius](https://tailwindcss.com/docs/border-radius): rounded-xs through rounded-4xl, rounded-full, rounded-none; per-side (rounded-t, rounded-r, rounded-b, rounded-l); per-corner (rounded-tl, etc.); logical variants
- [border-width](https://tailwindcss.com/docs/border-width): 0, 1, 2, 4, 8px; per-side (border-t, border-r, etc.); x/y axis; logical (border-s, border-e)
- [border-color](https://tailwindcss.com/docs/border-color): Full palette with opacity modifier; defaults to `currentColor` in v4 (was gray-200 in v3)
- [border-style](https://tailwindcss.com/docs/border-style): solid, dashed, dotted, double, hidden, none
- [outline-width](https://tailwindcss.com/docs/outline-width): 0, 1, 2, 4, 8px
- [outline-color](https://tailwindcss.com/docs/outline-color): Full palette
- [outline-style](https://tailwindcss.com/docs/outline-style): outline (1px solid), outline-dashed, outline-dotted, outline-double, outline-none (removes), outline-hidden (visually hides but preserves for keyboard); note: `outline-hidden` replaces v3's `outline-none`
- [outline-offset](https://tailwindcss.com/docs/outline-offset): Gap between element and its outline — 0, 1, 2, 4, 8, arbitrary

## Utility Reference — Effects

- [box-shadow](https://tailwindcss.com/docs/box-shadow): Drop shadows (shadow-xs through shadow-2xl, shadow-none) and inset shadows (inset-shadow-xs through inset-shadow-2xl); note scale is one step smaller than v3's names
- [text-shadow](https://tailwindcss.com/docs/text-shadow): Text drop shadows — text-shadow-xs through text-shadow-lg, text-shadow-none
- [opacity](https://tailwindcss.com/docs/opacity): opacity-0 through opacity-100 in steps of 5 plus 1, 2, 3
- [mix-blend-mode](https://tailwindcss.com/docs/mix-blend-mode): How element content blends with background — multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity, plus-lighter, normal
- [background-blend-mode](https://tailwindcss.com/docs/background-blend-mode): Blending between background layers of the same element
- [mask-clip](https://tailwindcss.com/docs/mask-clip): Area the mask applies to — border-box, padding-box, content-box, fill-box, stroke-box, view-box, no-clip
- [mask-composite](https://tailwindcss.com/docs/mask-composite): How multiple mask layers composite — add, subtract, intersect, exclude
- [mask-image](https://tailwindcss.com/docs/mask-image): Image or gradient used as a mask layer
- [mask-mode](https://tailwindcss.com/docs/mask-mode): alpha, luminance, match-source
- [mask-origin](https://tailwindcss.com/docs/mask-origin): Box the mask is positioned relative to
- [mask-position](https://tailwindcss.com/docs/mask-position): Starting position of the mask layer
- [mask-repeat](https://tailwindcss.com/docs/mask-repeat): Tiling behavior of the mask layer
- [mask-size](https://tailwindcss.com/docs/mask-size): Size of the mask layer — auto, cover, contain, arbitrary
- [mask-type](https://tailwindcss.com/docs/mask-type): For SVG `<mask>` elements — luminance or alpha interpretation

## Utility Reference — Filters

- [filter](https://tailwindcss.com/docs/filter): Composable filter utilities — blur-xs through blur-3xl, brightness-0 through brightness-200, contrast-0 through contrast-200, drop-shadow-xs through drop-shadow-2xl, grayscale, hue-rotate-0 through hue-rotate-360, invert, saturate-0 through saturate-200, sepia
- [backdrop-filter](https://tailwindcss.com/docs/backdrop-filter): Same filter functions applied to content behind the element (blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia)

## Utility Reference — Tables

- [border-collapse](https://tailwindcss.com/docs/border-collapse): border-collapse (shared borders) vs border-separate (individual cell borders)
- [border-spacing](https://tailwindcss.com/docs/border-spacing): Space between cells when using border-separate — per axis with border-spacing-x/y
- [table-layout](https://tailwindcss.com/docs/table-layout): table-auto (column width by content) vs table-fixed (equal column widths, faster rendering)
- [caption-side](https://tailwindcss.com/docs/caption-side): caption-top or caption-bottom

## Utility Reference — Transitions & Animation

- [transition-property](https://tailwindcss.com/docs/transition-property): What transitions — transition (common properties), transition-all, transition-colors, transition-opacity, transition-shadow, transition-transform, transition-none; plus individual properties for v4 (use `transition-[opacity,scale]` not `transition-[opacity,transform]`)
- [transition-behavior](https://tailwindcss.com/docs/transition-behavior): transition-normal vs transition-allow-discrete — enables transitioning discrete properties like `display: none` and `visibility`
- [transition-duration](https://tailwindcss.com/docs/transition-duration): 75ms, 100ms, 150ms, 200ms, 300ms, 500ms, 700ms, 1000ms
- [transition-timing-function](https://tailwindcss.com/docs/transition-timing-function): ease, linear, ease-in, ease-out, ease-in-out, ease-initial, and arbitrary cubic-bezier
- [transition-delay](https://tailwindcss.com/docs/transition-delay): Same scale as duration — delay before transition begins
- [animation](https://tailwindcss.com/docs/animation): Built-in — animate-spin, animate-ping, animate-pulse, animate-bounce; animate-none; define custom animations via `@keyframes` inside `@theme` as `--animate-*`

## Utility Reference — Transforms

- [backface-visibility](https://tailwindcss.com/docs/backface-visibility): backface-visible vs backface-hidden for 3D card-flip effects
- [perspective](https://tailwindcss.com/docs/perspective): Perspective depth for 3D child transforms — xs through 5xl and none; arbitrary
- [perspective-origin](https://tailwindcss.com/docs/perspective-origin): Vanishing point position — center, top, bottom, left, right, and corners
- [rotate](https://tailwindcss.com/docs/rotate): 2D rotation (rotate-45, rotate-90, etc.) and 3D rotation (rotate-x-*, rotate-y-*, rotate-z-*); negative values
- [scale](https://tailwindcss.com/docs/scale): Uniform scale (scale-50 through scale-150) and per-axis (scale-x-*, scale-y-*)
- [skew](https://tailwindcss.com/docs/skew): Skew on X and Y axes — 0, 1, 2, 3, 6, 12 degrees; negative values
- [transform](https://tailwindcss.com/docs/transform): Enable GPU transform layer (`transform-gpu`) or disable (`transform-none`); enable 3D transform container (`transform-3d`) or flat (`transform-flat`)
- [transform-origin](https://tailwindcss.com/docs/transform-origin): Transform pivot point — center, top, bottom, left, right, and all four corners
- [transform-style](https://tailwindcss.com/docs/transform-style): transform-flat (2D) vs transform-3d (preserve child 3D positions)
- [translate](https://tailwindcss.com/docs/translate): Translation — translate-x-*, translate-y-* using spacing scale; translate-z-* for 3D; negative values; fractions (translate-x-1/2)
- [zoom](https://tailwindcss.com/docs/zoom): CSS `zoom` property — scales element without affecting surrounding layout

## Utility Reference — Interactivity

- [accent-color](https://tailwindcss.com/docs/accent-color): Browser-native accent color for checkboxes, radio buttons, range inputs, and progress elements
- [appearance](https://tailwindcss.com/docs/appearance): appearance-none (remove native browser styling), appearance-auto (restore it)
- [caret-color](https://tailwindcss.com/docs/caret-color): Text input blinking cursor color
- [color-scheme](https://tailwindcss.com/docs/color-scheme): Hint browser UI (scrollbars, form controls) to use light, dark, or system color scheme
- [cursor](https://tailwindcss.com/docs/cursor): Mouse cursor style — auto, default, pointer, wait, text, move, not-allowed, grab, grabbing, zoom-in, zoom-out, crosshair, cell, and more
- [field-sizing](https://tailwindcss.com/docs/field-sizing): `field-sizing-content` makes `<textarea>` auto-grow/shrink to fit its content without JavaScript
- [pointer-events](https://tailwindcss.com/docs/pointer-events): pointer-events-none (ignore mouse/touch), pointer-events-auto (restore)
- [resize](https://tailwindcss.com/docs/resize): User-resizable handle — resize (both axes), resize-x, resize-y, resize-none
- [scroll-behavior](https://tailwindcss.com/docs/scroll-behavior): scroll-smooth (animated) vs scroll-auto for anchor link navigation
- [scrollbar-color](https://tailwindcss.com/docs/scrollbar-color): Thumb and track colors of native scrollbars using color palette
- [scrollbar-width](https://tailwindcss.com/docs/scrollbar-width): scrollbar-auto, scrollbar-thin, scrollbar-none (hides scrollbar but keeps scrollability)
- [scrollbar-gutter](https://tailwindcss.com/docs/scrollbar-gutter): scrollbar-gutter-stable prevents layout shift when scrollbar appears/disappears
- [scroll-margin](https://tailwindcss.com/docs/scroll-margin): Offset a scroll-snapped element appears at from the container edge
- [scroll-padding](https://tailwindcss.com/docs/scroll-padding): Padding applied to scroll container for snap point alignment
- [scroll-snap-align](https://tailwindcss.com/docs/scroll-snap-align): Alignment of snap target — snap-start, snap-center, snap-end, snap-align-none
- [scroll-snap-stop](https://tailwindcss.com/docs/scroll-snap-stop): snap-normal (can skip points) vs snap-always (must stop at each)
- [scroll-snap-type](https://tailwindcss.com/docs/scroll-snap-type): snap-x, snap-y, snap-both; with snap-mandatory (always snaps) or snap-proximity (snaps when close)
- [touch-action](https://tailwindcss.com/docs/touch-action): Which touch gestures browser handles vs passes to JS — auto, none, pan-x, pan-y, pan-left, pan-right, pan-up, pan-down, pinch-zoom, manipulation
- [user-select](https://tailwindcss.com/docs/user-select): select-none, select-text, select-all, select-auto
- [will-change](https://tailwindcss.com/docs/will-change): will-change-auto, will-change-scroll, will-change-contents, will-change-transform — hints for GPU compositing

## Utility Reference — SVG

- [fill](https://tailwindcss.com/docs/fill): SVG `fill` using full color palette — fill-current (inherits text color), fill-none
- [stroke](https://tailwindcss.com/docs/stroke): SVG `stroke` using full color palette — stroke-current, stroke-none
- [stroke-width](https://tailwindcss.com/docs/stroke-width): SVG stroke thickness — stroke-0, stroke-1, stroke-2

## Utility Reference — Accessibility

- [forced-color-adjust](https://tailwindcss.com/docs/forced-color-adjust): forced-color-adjust-auto (element adapts to Windows high-contrast mode) vs forced-color-adjust-none (opt out of forced colors for elements like charts that must preserve color meaning)