Tailwind CSS v4 Cheatsheet: All Key Classes and Concepts

1. Layout classes: display, position, overflow

The Tailwind CSS v4 cheatsheet starts with the layout fundamentals, because they form the basis of every component structure. The display classes are unchanged from v3: block, inline-block, inline, flex, inline-flex, grid, inline-grid, hidden. The position classes follow the same logic: static, relative, absolute, fixed, sticky. With inset-0 you set all four positions to zero, useful for overlay elements that need to fully cover their parent.

Particularly relevant for the Tailwind v4 cheatsheet: the new @starting-style support and improved transition classes. Overflow classes like overflow-hidden, overflow-auto, overflow-x-hidden and overflow-y-scroll remain stable in v4. The sizing classes size-* as shorthand for w-* and h-* at the same time are available by default in v4 and are a commonly used pattern for square icons and avatars.

<!-- Layout patterns from the Tailwind v4 cheatsheet -->

<!-- Full-bleed overlay with absolute positioning -->
<div class="relative overflow-hidden rounded-2xl">
  <img src="hero.jpg" alt="Hero" class="w-full h-64 object-cover">
  <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
  <div class="absolute inset-x-0 bottom-0 p-6 text-white">
    <h2 class="text-2xl font-bold">Overlay Title</h2>
  </div>
</div>

<!-- Sticky header with backdrop blur -->
<header class="sticky top-0 z-50 bg-white/80 backdrop-blur border-b border-slate-200">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
    <span class="font-bold text-slate-900">Logo</span>
    <nav class="hidden md:flex gap-6 text-sm text-slate-600">
      <a href="/" class="hover:text-sky-600 transition-colors">Home</a>
    </nav>
  </div>
</header>

<!-- size-* shorthand (new in Tailwind v4 standard) -->
<div class="size-12 rounded-full bg-sky-500 flex items-center justify-center text-white font-bold">
  TW
</div>

2. Flexbox: flex, gap, align, justify

Flexbox is the most widely used layout system in Tailwind CSS. The Tailwind v4 cheatsheet for flexbox covers: flex enables flexbox, flex-row and flex-col control direction, flex-wrap allows wrapping. Alignment is handled via items-center, items-start, items-end, items-stretch for the cross axis and justify-center, justify-between, justify-start, justify-end, justify-around, justify-evenly for the main axis.

In v4, spacing between flex items is preferably set with gap-* instead of margin hacks. The cheatsheet recommends gap-4 as a default, and gap-x-6 gap-y-4 when horizontal and vertical spacing should differ. flex-1, flex-auto, flex-none and flex-shrink-0 control the growing and shrinking of individual items. In v4, grow and shrink are added as short classes that replace flex-grow-1 and flex-shrink-1 and are cleaner to read.

3. Grid: grid-cols, grid-rows, span, subgrid

CSS Grid has been significantly extended in Tailwind CSS v4. The Tailwind v4 cheatsheet for grid: grid enables the grid container, grid-cols-1 through grid-cols-12 define the number of columns. With grid-cols-[repeat(auto-fill,minmax(280px,1fr))] you can use any CSS grid expression via arbitrary values. col-span-2, col-span-full, col-start-2, col-end-4 control the positioning of individual cells. For rows: row-span-*, row-start-*, row-end-*.

New in Tailwind v4: grid-cols-subgrid and grid-rows-subgrid. This lets nested grid elements inherit the columns of their parent grid, a long-awaited CSS feature that Tailwind now offers directly as a class. Combined with col-span-full and grid-cols-subgrid, you can build complex nested layouts that were previously only possible with negative margins or JavaScript. The Tailwind CSS v4 cheatsheet recommends preferring grid over flexbox whenever the layout needs two dimensions.

4. Spacing: padding, margin, gap, the new spacing system

The spacing system in Tailwind CSS is the central difference to manually written CSS. The Tailwind v4 cheatsheet for spacing: padding with p-*, px-*, py-*, pt-*, pr-*, pb-*, pl-*. Margin analogously with m-*, mx-*, my-* and the four sides. mx-auto centers block elements horizontally. In Tailwind v4 the spacing system is built on a 4px base with CSS custom properties, which allows adjusting the entire spacing scale with a single variable.

An important addition in the cheatsheet: in v4, spacing values are exposed as CSS custom properties --spacing-*. This allows spacing values to be used in any CSS context without needing access to Tailwind's build step. Negative spacing like -mt-4 or -mx-6 works in v4 exactly as in v3. The value space-x-* and space-y-* sets automatic spacing between direct child elements via the * + * selector, useful for lists and vertical stacks without manual gap.

5. Typography: font, text, leading, tracking

Typography classes are organized in the Tailwind v4 cheatsheet into several groups: font size (text-xs through text-9xl), font weight (font-thin through font-black), line height (leading-none, leading-tight, leading-snug, leading-normal, leading-relaxed, leading-loose), letter spacing (tracking-tighter, tracking-tight, tracking-normal, tracking-wide, tracking-wider, tracking-widest). Combining these deliberately produces professional typography without custom CSS.

In Tailwind v4, font sizes with matching default line heights are defined as custom properties: --text-xl contains both the font size and a matching default line height. This considerably simplifies consistent typography. text-balance and text-pretty are available as classes for text-wrap: balance and text-wrap: pretty, especially valuable for headlines and teasers that automatically produce better line breaks. These classes are among the most useful additions in the Tailwind CSS v4 cheatsheet for production projects.

6. Colors in v4: OKLCH and CSS custom properties

Tailwind CSS v4 switches the internal color representation from HEX to OKLCH. This has direct implications for the Tailwind v4 cheatsheet: color shades like bg-sky-500 are output internally as oklch(0.623 0.214 259.8) instead of a HEX value. OKLCH offers better perceptual uniformity: equal numeric steps between shades correspond to equal visual brightness steps. Nothing changes in usage for developers, the class names stay identical. The output in the browser is more precise, however.

All Tailwind colors are available in v4 as CSS custom properties: var(--color-sky-500) works everywhere in CSS, without build-step access to Tailwind's JavaScript API. The cheatsheet recommends using these variables in your own CSS rules whenever you need Tailwind colors outside of utility classes. Custom colors are defined directly in CSS in v4 with @theme { --color-brand: oklch(0.6 0.18 250); }, no JavaScript, no build restart.

/* tailwind.css - Tailwind v4 color system and theme customization */
@import "tailwindcss";

/* Define custom brand colors in OKLCH for perceptual uniformity */
@theme {
  --color-brand-50:  oklch(0.97 0.02 250);
  --color-brand-100: oklch(0.94 0.05 250);
  --color-brand-200: oklch(0.88 0.09 250);
  --color-brand-300: oklch(0.80 0.13 250);
  --color-brand-400: oklch(0.70 0.17 250);
  --color-brand-500: oklch(0.60 0.20 250);
  --color-brand-600: oklch(0.50 0.20 250);
  --color-brand-700: oklch(0.42 0.18 250);
  --color-brand-800: oklch(0.33 0.14 250);
  --color-brand-900: oklch(0.25 0.10 250);

  /* Custom spacing scale extension */
  --spacing-18: 4.5rem;
  --spacing-22: 5.5rem;
  --spacing-88: 22rem;

  /* Custom font family */
  --font-display: "Inter", system-ui, sans-serif;
}

/* Using CSS custom properties outside utility classes */
.custom-component {
  background-color: var(--color-brand-500);
  padding: var(--spacing-4);
  color: var(--color-white);
}

7. Variants: hover, focus, dark, group, peer

Variants are the heart of the Tailwind CSS cheatsheet. They make it possible to apply classes conditionally. State variants: hover:, focus:, focus-visible:, active:, disabled:, checked:, placeholder:. Responsive variants: sm:, md:, lg:, xl:, 2xl:. Dark mode: dark:. Print: print:. All variants are combinable: dark:hover:bg-sky-700 only applies in dark mode on hover.

In Tailwind v4, group and peer are more powerful than ever. group/name and peer/name allow named groups, so multiple nested groups can be targeted independently of each other: group-hover/sidebar:bg-sky-100 reacts only when the element with group/sidebar is hovered, not when a different group is active. New in v4: @custom-variant in CSS defines your own variants with any CSS selector. This fully replaces the addVariant plugin API call from v3.

8. v3 vs. v4: what has changed

The Tailwind CSS v4 cheatsheet would be incomplete without the direct differences to v3. The biggest difference: configuration moves from JavaScript into CSS. Instead of tailwind.config.js there is @theme {} in CSS. Plugins are included with @plugin, no longer in the plugins array. The default theme is dropped, all values come from the Oxide compiler core and are visible as CSS custom properties.

9. New classes in Tailwind v4

The Tailwind CSS v4 cheatsheet lists the most important class additions that came with v4. field-sizing-content: automatically fits textareas to their content height, without JavaScript. inset-shadow-*: inner shadows directly as a utility class. text-shadow-*: text shadows as a utility, previously only possible via arbitrary values. mask-*: CSS masks as utility classes, useful for fade effects on scroll areas. wrap-* classes for the new overflow-wrap behavior.

Especially practical for the Tailwind v4 cheatsheet: the improved container query support. With @container on a parent element and @sm:grid-cols-2 on child elements, layouts react to the size of their container instead of the viewport size. This is a paradigm shift for component-based development. Widgets, cards and sidebar modules can now truly decide how they present themselves independently of the layout context, without media queries and without JavaScript resize handlers.

/* tailwind.css - New Tailwind v4 utilities showcase */
@import "tailwindcss";

/* Custom variant for reduced motion accessibility */
@custom-variant motion-safe {
  @media (prefers-reduced-motion: no-preference) {
    &:where(*) { @slot; }
  }
}

/* Container query usage - component reacts to its own width */
.card-container {
  /* Enable container queries on this element */
  container-type: inline-size;
}

/*
  In HTML: class="card-container"
  Child:   class="grid @sm:grid-cols-2 @lg:grid-cols-3 gap-4"

  @sm, @md, @lg now refer to the container width, not the viewport.
  This makes the component truly self-contained and reusable.
*/

/* New v4 text-shadow utilities */
.hero-heading {
  /* text-shadow-md is now a real Tailwind utility class */
  text-shadow: 0 2px 4px rgb(0 0 0 / 0.3);
}

/* field-sizing-content for auto-growing textareas */
textarea.auto-resize {
  field-sizing: content;
  min-height: 3rem;
  max-height: 20rem;
  resize: none;
}

10. Summary

The Tailwind CSS v4 cheatsheet shows: the core classes for layout, flexbox, grid, spacing and typography are largely stable compared to v3. The fundamental shift lies in the configuration, from JavaScript to CSS, and in the new possibilities such as container queries, OKLCH colors, named groups and @custom-variant. Anyone who knows v3 will find their way around v4 quickly; the new features are additive, not breaking changes for most projects.

The most important takeaway from this cheatsheet: Tailwind v4 brings configuration closer to CSS and therefore more accessible for anyone who knows CSS well but wants to write less JavaScript. OKLCH colors and container queries are the two features that bring the greatest practical benefit for production projects. Anyone getting started with Tailwind CSS v4 should begin with these two concepts and work through the cheatsheet from there.

11. FAQ: Tailwind CSS v4 Cheatsheet