Tailwind CSS v4 Cheatsheet: alle wichtigen Klassen und Konzepte

1. Layout-Klassen: display, position, overflow

Das Tailwind CSS v4 Cheatsheet beginnt mit den Layout-Grundlagen, weil sie die Basis jeder Komponentenstruktur bilden. Die Display-Klassen sind unverändert von v3: block, inline-block, inline, flex, inline-flex, grid, inline-grid, hidden. Die Position-Klassen folgen derselben Logik: static, relative, absolute, fixed, sticky. Mit inset-0 setzt man alle vier Positionen auf null – nützlich für Overlay-Elemente, die ihren Elternteil vollständig abdecken sollen.

Für das Tailwind v4 Cheatsheet besonders relevant: Die neuen @starting-style-Unterstützung und verbesserte Transition-Klassen. Overflow-Klassen wie overflow-hidden, overflow-auto, overflow-x-hidden und overflow-y-scroll bleiben in v4 stabil. Die Größenklassen size-* als Shorthand für w-* und h-* gleichzeitig sind in v4 standardmäßig verfügbar und ein häufig genutztes Muster für quadratische Icons und Avatare.

<!-- 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 ist das meistgenutzte Layout-System in Tailwind CSS. Das Tailwind v4 Cheatsheet für Flexbox umfasst: flex aktiviert Flexbox, flex-row und flex-col steuern die Richtung, flex-wrap erlaubt Umbruch. Die Ausrichtung erfolgt über items-center, items-start, items-end, items-stretch für die Kreuzachse und justify-center, justify-between, justify-start, justify-end, justify-around, justify-evenly für die Hauptachse.

Abstände zwischen Flex-Items setzt man in v4 bevorzugt mit gap-* statt Margin-Hacks. Das Cheatsheet empfiehlt: gap-4 für Standard, gap-x-6 gap-y-4 wenn horizontale und vertikale Abstände unterschiedlich sein sollen. flex-1, flex-auto, flex-none und flex-shrink-0 kontrollieren das Wachstum und Schrumpfen einzelner Items. In v4 kommt grow und shrink als Kurzklassen hinzu, die flex-grow-1 und flex-shrink-1 ersetzen und sauberer lesbar sind.

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

CSS Grid ist in Tailwind CSS v4 erheblich erweitert worden. Das Tailwind v4 Cheatsheet für Grid: grid aktiviert den Grid-Container, grid-cols-1 bis grid-cols-12 definieren die Spaltenanzahl. Mit grid-cols-[repeat(auto-fill,minmax(280px,1fr))] nutzt man beliebige CSS-Grid-Ausdrücke via arbitrary values. col-span-2, col-span-full, col-start-2, col-end-4 steuern die Positionierung einzelner Zellen. Für Reihen: row-span-*, row-start-*, row-end-*.

Neu in Tailwind v4: grid-cols-subgrid und grid-rows-subgrid. Damit können verschachtelte Grid-Elemente die Spalten ihres Elterngrids übernehmen – ein lang erwartetes CSS-Feature, das Tailwind jetzt direkt als Klasse anbietet. In Kombination mit col-span-full und grid-cols-subgrid lassen sich komplexe verschachtelte Layouts bauen, die bis dato nur mit negativen Margins oder JavaScript möglich waren. Das Tailwind CSS v4 Cheatsheet empfiehlt, grid gegenüber Flexbox bevorzugt einzusetzen, wenn das Layout zwei Dimensionen benötigt.

4. Spacing: padding, margin, gap – das neue Spacing-System

Das Spacing-System in Tailwind CSS ist der zentrale Unterschied zu manuell geschriebenem CSS. Das Tailwind v4 Cheatsheet für Spacing: Padding mit p-*, px-*, py-*, pt-*, pr-*, pb-*, pl-*. Margin analog mit m-*, mx-*, my-* und den vier Seiten. mx-auto zentriert Blockelemente horizontal. In Tailwind v4 ist das Spacing-System auf eine 4px-Basis mit CSS Custom Properties aufgebaut, was Anpassungen des gesamten Spacing-Maßstabs mit einer einzigen Variable ermöglicht.

Wichtige Ergänzung im Cheatsheet: In v4 sind Spacing-Werte als CSS Custom Properties --spacing-* exponiert. Das erlaubt, Spacing-Werte in beliebigen CSS-Kontexten zu verwenden, ohne Tailwinds Build-Step zu benötigen. Negative Abstände wie -mt-4 oder -mx-6 funktionieren in v4 genauso wie in v3. Der Wert space-x-* und space-y-* setzt automatische Abstände zwischen direkten Kindelementen über den * + *-Selektor – nützlich für Listen und vertikale Stacks ohne manuelles Gap.

5. Typografie: font, text, leading, tracking

Typografie-Klassen sind im Tailwind v4 Cheatsheet in mehrere Gruppen gegliedert: Schriftgröße (text-xs bis text-9xl), Schriftgewicht (font-thin bis font-black), Zeilenhöhe (leading-none, leading-tight, leading-snug, leading-normal, leading-relaxed, leading-loose), Zeichenabstand (tracking-tighter, tracking-tight, tracking-normal, tracking-wide, tracking-wider, tracking-widest). Kombiniert man diese gezielt, entsteht ohne Custom CSS professionelle Typografie.

In Tailwind v4 sind Schriftgrößen mit zugehörigen Standard-Zeilenhöhen als Custom Properties definiert: --text-xl enthält sowohl die Schriftgröße als auch eine passende Standardzeilenhöhe. Das vereinfacht konsistente Typografie erheblich. text-balance und text-pretty sind als Klassen für text-wrap: balance und text-wrap: pretty verfügbar – besonders wertvoll für Headlines und Teaser, die automatisch bessere Zeilenumbrüche erzeugen. Diese Klassen sind im Tailwind CSS v4 Cheatsheet eine der nützlichsten Ergänzungen für Produktionsprojekte.

6. Farben in v4: OKLCH und CSS Custom Properties

Tailwind CSS v4 wechselt die interne Farb-Repräsentation von HEX auf OKLCH. Das hat direkte Auswirkungen auf das Tailwind v4 Cheatsheet: Farbtöne wie bg-sky-500 werden intern als oklch(0.623 0.214 259.8) ausgegeben statt als HEX-Wert. OKLCH bietet bessere perceptuelle Gleichmäßigkeit: gleiche numerische Schritte zwischen Schattierungen entsprechen gleichmäßigen visuellen Helligkeitsstufen. Für Entwickler ändert sich in der Verwendung nichts – die Klassennamen bleiben identisch. Die Ausgabe im Browser ist jedoch präziser.

Alle Tailwind-Farben sind in v4 als CSS Custom Properties verfügbar: var(--color-sky-500) funktioniert überall im CSS, ohne Build-Step-Zugang zu Tailwinds JavaScript-API. Das Cheatsheet empfiehlt, diese Variables in eigenen CSS-Regeln zu nutzen, wenn man Tailwind-Farben außerhalb von Utility-Klassen braucht. Eigene Farben werden in v4 direkt im CSS mit @theme { --color-brand: oklch(0.6 0.18 250); } definiert – kein JavaScript, kein Build-Neustart.

/* 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. Varianten: hover, focus, dark, group, peer

Varianten sind das Herzstück des Tailwind CSS Cheatsheets. Sie ermöglichen, Klassen kontextabhängig anzuwenden. Zustandsvarianten: hover:, focus:, focus-visible:, active:, disabled:, checked:, placeholder:. Responsive Varianten: sm:, md:, lg:, xl:, 2xl:. Dark Mode: dark:. Print: print:. Alle Varianten sind kombinierbar: dark:hover:bg-sky-700 gilt nur im Dark Mode beim Hover.

In Tailwind v4 sind group und peer mächtiger als je zuvor. group/name und peer/name erlauben benannte Gruppen – damit kann man mehrere verschachtelte Gruppen unabhängig voneinander ansprechen: group-hover/sidebar:bg-sky-100 reagiert nur, wenn das Element mit group/sidebar gehoverd wird, nicht wenn eine andere Gruppe aktiv ist. Neu in v4: @custom-variant im CSS definiert eigene Varianten mit beliebigen CSS-Selektoren. Das ersetzt den addVariant-Plugin-API-Aufruf aus v3 vollständig.

8. v3 vs. v4: was sich geändert hat

Das Tailwind CSS v4 Cheatsheet wäre unvollständig ohne die direkten Unterschiede zu v3. Der größte Unterschied: Die Konfiguration wandert von JavaScript ins CSS. Statt tailwind.config.js gibt es @theme {} im CSS. Plugins werden mit @plugin eingebunden, nicht mehr im plugins-Array. Das Default-Theme entfällt – alle Werte kommen aus dem Oxide-Compiler-Kern und sind als CSS Custom Properties sichtbar.

9. Neue Klassen in Tailwind v4

Das Tailwind CSS v4 Cheatsheet listet die wichtigsten Klassen-Ergänzungen, die in v4 dazugekommen sind. field-sizing-content: Passt Textareas automatisch ihrer Inhaltshöhe an, ohne JavaScript. inset-shadow-*: Innere Schatten direkt als Utility-Klasse. text-shadow-*: Text-Schatten als Utility, bisher nur via arbitrary values möglich. mask-*: CSS-Masken als Utility-Klassen, nützlich für Fade-Effekte an Scrollbereichen. wrap-* Klassen für das neue overflow-wrap-Verhalten.

Für das Tailwind v4 Cheatsheet besonders praxisrelevant: Die verbesserte Container-Query-Unterstützung. Mit @container auf einem Elternelement und @sm:grid-cols-2 auf Kindelementen reagieren Layouts auf die Größe ihres Containers statt auf die Viewportgröße. Das ist ein Paradigmenwechsel für komponentenbasiertes Entwickeln. Widgets, Karten und Sidebar-Module können nun wirklich unabhängig vom Layout-Kontext entscheiden, wie sie sich darstellen – ohne Media Queries und ohne JavaScript-Resize-Handler.

/* 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. Zusammenfassung

Das Tailwind CSS v4 Cheatsheet zeigt: Die Kernklassen für Layout, Flexbox, Grid, Spacing und Typografie sind weitgehend stabil gegenüber v3. Der grundlegende Shift liegt in der Konfiguration – von JavaScript zu CSS – und in den neuen Möglichkeiten wie Container Queries, OKLCH-Farben, benannten Gruppen und @custom-variant. Wer v3 kennt, findet sich in v4 schnell zurecht; die neuen Features sind additiv, keine breaking changes für die meisten Projekte.

Die wichtigste Erkenntnis aus diesem Cheatsheet: Tailwind v4 macht Konfiguration näher am CSS und damit zugänglicher für alle, die CSS gut kennen, aber weniger JavaScript schreiben wollen. OKLCH-Farben und Container Queries sind die zwei Features, die den größten praktischen Nutzen für Produktionsprojekte bringen. Wer neu in Tailwind CSS v4 einsteigt, sollte mit diesen beiden Konzepten beginnen und sich von dort aus durch das Cheatsheet arbeiten.

11. FAQ: Tailwind CSS v4 Cheatsheet