This is the most thorough Tailwind CSS v4 cheat sheet available online. It covers all 3,017 utility classes across 28 categories, including 720 classes that are entirely new in v4. Every class includes its CSS property mapping, a brief description of what it does, and a live visual preview you can see before you copy. The cheat sheet also documents the full v3-to-v4 migration: renamed classes like flex-grow becoming grow, removed classes like bg-opacity-*, and the new slash syntax for color opacity. You can search by class name or CSS property, filter by v4-only features, save your most-used classes, and browse category by category. Whether you are starting a new v4 project or migrating an existing v3 codebase, this reference gives you every class, every change, and every new feature in one place without switching between the official docs and your editor.
Type any Tailwind class like flex, bg-sky-500, or md:grid-cols-3 into the search bar and results filter instantly. You can also search by CSS property name like display, background-color, or grid-template-columns. This bidirectional search means you can go from CSS to Tailwind or from Tailwind to CSS depending on what you already know. Press Ctrl+K (Cmd+K on Mac) to focus the search bar from anywhere on the page.
All 3,017 classes are organized into 28 categories: Layout and Display, Flexbox, Grid, Box Alignment, Spacing, Sizing, Typography, Backgrounds, Borders and Radius, Effects and Shadows, Filters and Backdrop, Transitions and Animation, Transforms and 3D, Interactivity, SVG, Tables, Accessibility, Variants and Modifiers, Line Clamping and Text Wrap, Writing Mode and Direction, Container Queries, Animations and Keyframes, Print and Media, Scrollbar and Scroll, Caret and Accent Color, Logical Properties for RTL, Sizing Extended, and Misc v4 Utilities. Each category expands to show every class with a visual preview that demonstrates what the class actually does.
Every class in the grid and compact views has a copy action. Click once and the class name is on your clipboard, ready to paste into your HTML, JSX, or Vue template. For classes that accept arbitrary values like w-[320px] or text-[#1a1a2e], both the standard scale values and the arbitrary value syntax are documented so you know your options.
Click the v4 New filter button to narrow the view to only the 720 utility classes that did not exist in Tailwind v3. This is the fastest way to discover what v4 added: 3D transforms like rotate-x-45, container queries like @sm and @lg, field-sizing utilities, inset shadow classes, logical properties for RTL support, text-wrap-balance and text-wrap-pretty, and dozens more. Each new class is marked with a v4 badge in the grid view.
The Saved tab stores classes you use often. Add any class from the reference and it persists in your browser local storage. This is useful for teams that share a design system or for developers who always reach for the same spacing, color, and typography tokens. Your saved data never leaves your device and requires no account.
The v3 to v4 tab shows every class that was renamed, removed, or changed syntax between versions. This includes opacity utilities that moved to the slash syntax (bg-opacity-50 became bg-blue-500/50), shortened class names (flex-grow became grow), and removed utilities like space-x-reverse. The migration data covers configuration changes too: the tailwind.config.js file replaced by @theme directives, the triple @tailwind directives replaced by @import "tailwindcss", and the content array replaced by automatic detection.
| Category | Classes | What It Covers | Notable v4 Additions |
|---|---|---|---|
| Layout and Display | 100+ | display, position, visibility, float, clear, aspect-ratio, container, box-sizing, inset | size-* shorthand (width + height), max-sm:/max-md: variants, starting: variant |
| Flexbox | 40+ | flex-direction, flex-wrap, justify-content, align-items, align-self, align-content, flex-grow, flex-shrink, flex-basis, gap, order | grow/grow-0 (renamed from flex-grow), shrink/shrink-0 (renamed from flex-shrink) |
| Grid | 150+ | grid-template-columns, grid-template-rows, grid-column, grid-row, grid-auto-flow, grid-auto-columns, grid-auto-rows, gap | grid-cols-subgrid, grid-rows-subgrid |
| Box Alignment | 30+ | justify-items, justify-self, place-content, place-items, place-self | Same as v3 with improved variable support |
| Spacing | 80+ | margin, padding, space-x, space-y | Logical properties: ms-, me-, ps-, pe- for RTL support |
| Sizing | 100+ | width, height, min-width, min-height, max-width, max-height | size-* shorthand utility, logical sizing |
| Typography | 200+ | font-family, font-size, font-weight, font-style, font-stretch, letter-spacing, line-height, text-align, text-transform, text-decoration, text-overflow, text-wrap, text-indent, hyphens | font-stretch-* (9 values), text-wrap-balance, text-wrap-pretty, text-nowrap (renamed from whitespace-nowrap), hyphens-auto/manual/none |
| Backgrounds | 60+ | background-color, background-image, background-position, background-size, background-attachment, gradient stops | oklch color support, gradient position stops (from-50%, via-50%, to-50%) |
| Borders and Radius | 80+ | border-width, border-color, border-style, border-radius, outline, outline-offset, ring, divide | border-x/border-y, logical border-radius (rounded-s/e/ss/se), inset-ring-* |
| Effects and Shadows | 30+ | box-shadow, opacity, mix-blend-mode, background-blend-mode | inset-shadow-* for inner shadows |
| Filters and Backdrop | 30+ | blur, brightness, contrast, grayscale, hue-rotate, invert, saturate, sepia, backdrop-filter | Same as v3 with improved variable support |
| Transitions and Animation | 50+ | transition-property, transition-duration, transition-timing-function, animation | animate-in/animate-out with @starting-style support, starting: variant |
| Transforms and 3D | 50+ | rotate, scale, translate, skew, transform-style, perspective, backface-visibility | rotate-x/y/z (3D), scale-z/scale-3d, translate-z, perspective-*, perspective-origin-*, transform-3d, transform-flat, backface-visible/hidden |
| Interactivity | 40+ | cursor, pointer-events, resize, scroll-behavior, scroll-snap, touch-action, user-select, caret-color, accent-color | field-sizing-content/fixed for auto-sizing textareas |
| SVG | 15+ | fill, stroke, stroke-width | stroke-w-* utility |
| Tables | 10+ | border-collapse, border-spacing, table-layout | Same as v3 |
| Accessibility | 10+ | screen-reader-only, not-sr-only | Same as v3 |
| Variants and Modifiers | 50+ | responsive prefixes, hover/focus/active states, dark mode, group, peer, has-, not-, reduced-motion | not-{variant} negation, named groups/peers (group/sidebar, peer/email), max-sm:/max-md: max-width variants |
| Line Clamping and Text Wrap | 14 | -webkit-line-clamp, text-wrap, hyphens | text-wrap-balance, text-wrap-pretty, text-nowrap, hyphens-auto/manual/none (all v4 new) |
| Writing Mode and Direction | 10+ | writing-mode, direction | Same as v3 |
| Container Queries | 15+ | container-type, container-name, @container responsive modifiers | Entire category is v4 new: @container, @sm/@md/@lg/@xl/@2xl container breakpoints, named containers |
| Animations and Keyframes | 20+ | animate-spin, animate-ping, animate-pulse, animate-bounce, animate-in, animate-out | animate-in/animate-out with @starting-style for enter/exit animations |
| Print and Media | 10+ | print: variant, page-break, break-inside/after/before | Same as v3 |
| Scrollbar and Scroll | 10+ | scrollbar-width, scrollbar-color, scroll-behavior, scroll-snap, overscroll | Same as v3 with improved variable support |
| Caret and Accent Color | 8 | caret-color, accent-color | Same as v3 |
| Logical Properties (RTL) | 20+ | margin-inline-start/end, padding-inline-start/end, inset-inline, border-inline, float-inline | Entire category is v4 new: ms-, me-, ps-, pe-, start-, end- for bidirectional layout |
| Sizing Extended | 20+ | Extended width, height, min/max values | Additional size tokens and arbitrary value shorthand |
| Misc v4 Utilities | 10+ | Various CSS properties new in v4 | not-{variant}, named groups, gradient positions, starting: variant |
The flex-grow and flex-shrink utilities were shortened to grow and shrink in v4. flex-grow became grow, flex-grow-0 became grow-0, flex-shrink became shrink, and flex-shrink-0 became shrink-0. The old names no longer work in v4. If you have flex-grow in your templates, the upgrade tool converts them, but check any place where you construct class names dynamically from variables or API responses.
The overflow-ellipsis class was renamed to text-ellipsis in v4 for better clarity, since the CSS property it maps to is text-overflow, not overflow. Similarly, whitespace-nowrap was replaced by text-nowrap as part of the new text-wrap-* system. The old names are not valid in v4.
The box decoration break utilities were renamed to match their actual CSS property name. decoration-clone became box-decoration-clone and decoration-slice became box-decoration-slice. This makes the class names consistent with the CSS specification and easier to look up in documentation.
The standalone opacity modifier utilities are gone in v4. Instead of writing bg-blue-500 bg-opacity-50 as two separate classes, you now write bg-blue-500/50 as a single class using the slash syntax. This applies to every color property: text-red-600/80, border-gray-300/40, ring-blue-500/20, placeholder-gray-400/50, and divide-gray-200/50. The slash syntax is more concise and keeps the color and its opacity together as one token.
The space-x-reverse and space-y-reverse utilities were removed in v4. If you were using these for RTL support, the recommended replacement is the new logical property utilities: ms- (margin-inline-start) and me- (margin-inline-end) handle directional spacing correctly without needing a reverse class. For Flexbox and Grid layouts, use the new start- and end- utilities for alignment.
The entire JavaScript configuration file is gone. In v4, you define design tokens inside your CSS using @theme blocks. The theme.extend object becomes @theme { }, the content array becomes @source directives or automatic detection, and plugins are replaced by @utility and @variant directives. The upgrade tool (npx @tailwindcss/upgrade) converts your existing config automatically, including custom colors, fonts, spacing scales, and breakpoints.
In v3, your main CSS file needed @tailwind base; @tailwind components; @tailwind utilities; as three separate directives. In v4, this entire setup is replaced by a single line: @import "tailwindcss". This one import gives you the full framework including base styles, all utility classes, and the v4 build engine. Mixing the old triple-directive syntax with the new import causes conflicts and must be avoided.
The content array in tailwind.config.js that told v3 where to find class usage has been replaced by automatic detection in v4. You no longer need to specify glob patterns like content: ["./src/**/*.{html,tsx,jsx}"]. If you need to override the auto-detection, use the @source directive in your CSS file. Missing styles in production after upgrading usually means the auto-detection is not scanning all your template directories.
v3 ran on PostCSS with the tailwindcss plugin. v4 uses Lightning CSS, a Rust-based CSS processor that is dramatically faster. Full builds are reported to be up to 10x faster for large projects. You do not need to configure Lightning CSS yourself; it is built into the v4 engine. If you still need PostCSS for other plugins like cssnano or postcss-preset-env, you can run it alongside Tailwind, but Tailwind itself no longer depends on PostCSS.
In v3, the border utility applied gray-200 as the default border color. In v4, borders default to currentColor, which means they inherit the text color of the element. This matches how CSS borders work natively but can break layouts that relied on the gray default. Add border-gray-200 explicitly to any element that needs the old behavior.
| Class | CSS Property | Description |
|---|---|---|
| rotate-x-* | transform: rotateX(*) | Rotate element around X axis for 3D flip effects |
| rotate-y-* | transform: rotateY(*) | Rotate element around Y axis for card flip animations |
| rotate-z-* | transform: rotateZ(*) | Rotate element around Z axis (same as rotate-* in 3D context) |
| scale-x-* | transform: scaleX(*) | Scale element along X axis independently |
| scale-y-* | transform: scaleY(*) | Scale element along Y axis independently |
| scale-z-* | transform: scaleZ(*) | Scale element along Z axis for 3D depth effects |
| scale-3d | transform: scale3d() | Enable full 3D scaling context on element |
| translate-z-* | transform: translateZ(*) | Move element along Z axis for 3D positioning |
| perspective-* | perspective: * | Set 3D perspective viewing distance on parent element |
| perspective-origin-* | perspective-origin: * | Set the vanishing point for 3D perspective transforms |
| transform-3d | transform-style: preserve-3d | Allow child elements to exist in 3D space |
| transform-flat | transform-style: flat | Flatten child elements into 2D plane |
| backface-visible | backface-visibility: visible | Show element even when facing away from viewer |
| backface-hidden | backface-visibility: hidden | Hide element when facing away (for card flips) |
| Class | CSS Property | Description |
|---|---|---|
| @container | container-type: inline-size | Define a container query context on an element |
| @container-{name} | container-name: {name} | Name a container for targeted queries |
| @sm:{class} | @container (min-width: 640px) | Apply class when container is at least 640px wide |
| @md:{class} | @container (min-width: 768px) | Apply class when container is at least 768px wide |
| @lg:{class} | @container (min-width: 1024px) | Apply class when container is at least 1024px wide |
| @xl:{class} | @container (min-width: 1280px) | Apply class when container is at least 1280px wide |
| @2xl:{class} | @container (min-width: 1536px) | Apply class when container is at least 1536px wide |
| Class | CSS Property | Description |
|---|---|---|
| ms-* | margin-inline-start: * | Start margin that flips in RTL layouts |
| me-* | margin-inline-end: * | End margin that flips in RTL layouts |
| ps-* | padding-inline-start: * | Start padding that flips in RTL layouts |
| pe-* | padding-inline-end: * | End padding that flips in RTL layouts |
| start-* | inset-inline-start: * | Start positioning that flips in RTL |
| end-* | inset-inline-end: * | End positioning that flips in RTL |
| rounded-s-* | border-start-start-radius + border-start-end-radius | Start-side border radius for RTL |
| rounded-e-* | border-end-start-radius + border-end-end-radius | End-side border radius for RTL |
| border-s-* | border-inline-start-width: * | Start border width for RTL layouts |
| border-e-* | border-inline-end-width: * | End border width for RTL layouts |
| Class | CSS Property | Description |
|---|---|---|
| text-wrap-balance | text-wrap: balance | Distribute text evenly across lines to prevent orphans |
| text-wrap-pretty | text-wrap: pretty | Prevent orphan words on the last line of text |
| text-nowrap | text-wrap: nowrap | Prevent text from wrapping (replaces whitespace-nowrap) |
| field-sizing-content | field-sizing: content | Auto-size textarea to fit its content as user types |
| field-sizing-fixed | field-sizing: fixed | Fixed size form field (default browser behavior) |
| inset-shadow-* | box-shadow: inset * | Inner shadow utilities for recessed UI elements |
| inset-ring-* | box-shadow: inset 0 0 0 * | Inner ring utilities for inset outlines |
| font-stretch-* | font-stretch: * | 9 values from ultra-condensed to ultra-expanded |
| size-* | width: *; height: * | Shorthand that sets both width and height at once |
| max-sm:/max-md:/max-lg: | max-width media queries | Max-width responsive variants for mobile-first |
| not-{variant} | Negate any variant | not-first, not-last, not-hover for inverse selections |
| starting: | @starting-style | Define entry animation styles for new elements |
| animate-in | Enter animation | Animate element entrance with @starting-style |
| animate-out | Exit animation | Animate element departure with @starting-style |
Wrap two card faces inside a container with perspective-near (about 300px). Give the container transform-3d and transition-transform. The front face is visible by default, and the back face uses rotate-y-180 and backface-hidden. On hover, rotate the container with rotate-y-180. The front face hides itself (backface-hidden) and the back face appears. This creates a smooth flip animation using only Tailwind classes, no custom CSS required. In v3, you would have needed custom CSS for perspective, transform-style, and backface-visibility.
Apply @container to a parent element to define a query context. Then use @sm:flex-row on a child element to switch from a stacked layout (mobile) to a horizontal layout (wider container) based on the container width, not the viewport width. This means the same card component adapts whether it is placed in a wide dashboard panel or a narrow sidebar. In v3, you could only use viewport-based responsive prefixes like md:flex-row, which could not adapt to the container size.
Replace your entire tailwind.config.js with a @theme block in your CSS file. Define custom colors using OKLCH for perceptual uniformity: @theme { --color-brand: oklch(0.7 0.15 250); --font-heading: 'Inter', sans-serif; --radius-btn: 0.5rem; }. Now bg-brand, font-heading, and rounded-btn work as native Tailwind utilities. These values are also available as CSS custom properties (var(--color-brand)) that you can reference in your own styles or JavaScript. No JavaScript configuration, no plugins, no separate config file.
Add field-sizing-content to any textarea element and it grows automatically as the user types more content, and shrinks back when text is deleted. No JavaScript resize observer or auto-resize function needed. This is a native CSS feature that Tailwind v4 exposes as a utility class. Combine it with min-h-[80px] and max-h-[300px] to set reasonable bounds. This solves one of the most common frontend annoyances with a single class.
Use ms-4 (margin-inline-start) instead of ml-4 (margin-left) and me-4 (margin-inline-end) instead of mr-4 (margin-right). When the page direction changes to RTL (dir="rtl"), the margins automatically flip: ms-4 applies to the right side in RTL and the left side in LTR. The same pattern works for padding (ps-, pe-), positioning (start-, end-), border radius (rounded-s-, rounded-e-), and border width (border-s-, border-e-). This eliminates the need for separate RTL stylesheets or CSS overrides.
Tailwind v4 introduces animate-in and animate-out utilities that work with the @starting-style CSS rule. Apply animate-in to an element and it transitions smoothly from opacity-0 and a slight translate to its final state when it first appears. The starting: variant lets you customize the entry state: starting:opacity-0 starting:translate-y-4. For exit animations, animate-out reverses the transition. This replaces the need for JavaScript animation libraries for simple enter/exit effects.
Apply text-wrap-balance to any heading or paragraph and the browser distributes text evenly across lines, preventing awkward orphans where the last line has only one or two words. Use text-wrap-pretty for body text where you want the browser to avoid orphans but still allow natural wrapping. These are CSS-native features that Tailwind v4 exposes as utility classes. text-wrap-balance is especially useful for card titles, hero headings, and any short-form text where line balance matters.
Classes like bg-opacity-50, ring-2, ring-offset-2, placeholder-purple-300, divide-gray-200, and space-x-reverse either changed syntax or were removed entirely in v4. Running npx @tailwindcss/upgrade on your project catches most of these, but it misses class names that are constructed dynamically with string concatenation or fetched from an API. After running the upgrade tool, search your codebase manually for these patterns.
If you delete tailwind.config.js without running the upgrade tool first, all your custom colors, fonts, spacing, and breakpoints disappear silently. The upgrade tool converts your JavaScript config into CSS @theme directives. Always run npx @tailwindcss/upgrade before removing the config file, review the generated @theme blocks, and verify that your custom utilities still work in the browser before proceeding.
Using the v3 triple-directive syntax (@tailwind base; @tailwind components; @tailwind utilities;) alongside the v4 @import "tailwindcss" causes build conflicts. V4 uses the single import syntax only. If you are on v4, remove all @tailwind directives and use only @import "tailwindcss". The old directives are not valid in v4 and will produce errors or duplicate styles.
V4 auto-detects content paths instead of requiring a content array. If your production build is missing styles, the auto-detection is probably not scanning all your template directories. This commonly happens with monorepo setups, component libraries in separate packages, or template files stored outside the default scan paths. Add @source directives in your CSS file to explicitly include any directories the auto-detection misses.
V4 changed the default border color from gray-200 to currentColor. This means borders inherit the text color by default, which matches native CSS behavior but differs from v3. If your design depends on gray borders appearing automatically, add border-gray-200 explicitly to those elements. This is one of the most visually noticeable changes when migrating an existing project.
V4 includes its own build engine and does not require PostCSS for Tailwind processing. If your postcss.config.js still references the old tailwindcss plugin, it may conflict with the v4 engine. For Vite projects, switch to the @tailwindcss/vite plugin. For Next.js, use @tailwindcss/postcss. Remove the old tailwindcss PostCSS plugin from your config file.
V4's CSS-first approach means your entire Tailwind configuration lives in your main CSS file. Resist the urge to split @theme blocks across multiple files. One CSS file with all @theme, @source, @utility, and @variant directives makes it easy for any team member to find and modify design tokens. If the file grows large, use CSS comments to organize sections by category (colors, spacing, typography, breakpoints) rather than splitting into separate files.
When defining custom colors in @theme, prefer OKLCH values over HEX or RGB. OKLCH produces color scales where each step appears equally different to the human eye, unlike HSL where blue-500 and yellow-500 at the same lightness value look dramatically different in perceived brightness. This makes your design system feel more cohesive and accessible. Write @theme { --color-brand: oklch(0.7 0.15 250); } instead of --color-brand: #3b82f6;.
Container queries let components respond to their own width instead of the viewport width. This means a card component renders differently when placed in a sidebar versus a main content area, without any JavaScript or prop-based logic. Apply @container to parent elements and use @sm:, @md:, @lg: modifiers on children. This pattern reduces code duplication and makes components truly portable across your application.
The v3 pattern of separate opacity utilities (bg-opacity-50, text-opacity-80) is gone in v4. The slash syntax (bg-blue-500/50, text-gray-900/80) is more concise, more readable, and combines the color and opacity into a single token. Adopt this pattern consistently across your project for cleaner class lists and easier visual scanning. If you are migrating, the upgrade tool handles this conversion automatically.
If your application supports RTL languages like Arabic or Hebrew, use the new logical property utilities from day one. Replace ml-4 with ms-4, mr-4 with me-4, pl-4 with ps-4, and so on. These utilities automatically flip direction when the page is set to RTL, eliminating the need for separate RTL stylesheets. The same pattern applies to positioning (start-, end-), border radius (rounded-s-, rounded-e-), and border width (border-s-, border-e-).
The npx @tailwindcss/upgrade command handles the most tedious parts of v3-to-v4 migration: converting tailwind.config.js to @theme, updating renamed class names, replacing opacity utilities with slash syntax, and swapping the triple-directive import for the single @import. Run it first, review the changes it makes, and then manually check for dynamically constructed class names, third-party component libraries that bundle v3 classes, and any CSS files that still reference old v3 patterns.