Tailwind CSS v4 Cheat Sheet (durchsuchbar)

Ein durchsuchbares Tailwind CSS v4 Cheat Sheet: Tippe eine Klasse oder ein einfaches Wort ein und sieh das exakte CSS, das v4 erzeugt, von var(--spacing)-Vielfachen bis zu OKLCH-Farbtokens. Es behandelt außerdem @theme-Tokens, Breakpoints, Container Queries, live Flex- und Grid-Boxen, die komplette Farbpalette, Dark Mode und die Umbenennungen von v3 zu v4.

Aktualisiert am 13. Oktober 2026

Dieses Cheat Sheet behandelt Tailwind CSS v4 (v4.3 ist zum Zeitpunkt des Schreibens, im Oktober 2026, die aktuelle Version). Zu jeder Klasse zeigt es das CSS, das v4 tatsächlich erzeugt. Das ist wichtig, weil v4 die Art geändert hat, wie Werte entstehen: Abstände sind ein Vielfaches einer einzigen --spacing-Variable, Farben sind --color-*-Variablen in OKLCH, und Größen wie Radius, Schatten und Text stammen aus benannten Theme-Variablen. Tippe in das Feld, um zu filtern. Die Suche funktioniert mit Klassennamen, dem CSS, das sie ausgeben, und einfachen Wörtern wie "center", "gradient" oder "sticky".

Alle Utilities durchsuchen

Hinweise zum Lesen der Tabelle: calc(var(--spacing) * 4) ergibt 1rem, weil der Standardwert von --spacing 0.25rem ist. Ändere diese eine Variable in @theme, und jedes Padding, jede Margin, jeder Gap, jede Breite und jede Höhe auf der Zahlenskala ändert sich mit. Wo das erzeugte CSS lang ist (Verläufe, Rings, Transitions), zeigt die Tabelle eine vereinfachte Fassung und weist darauf hin.

Wie v4 aus einer Klasse einen Wert macht

Es gibt in v4 vier Wege, einer Utility einen Wert zu geben. Wer weiß, welchen er gerade nutzt, kann sich die meisten Überraschungen erklären:

• Eine Zahl auf der Spacing-Skala: p-4, w-64, gap-3. Jede ganze Zahl funktioniert, ebenso Viertelschritte wie p-2.5, ganz ohne Konfiguration. Der Wert ist calc(var(--spacing) * n).
• Ein benannter Theme-Wert: rounded-lg, shadow-md, text-xl, max-w-md. Jeder liest eine Variable wie --radius-lg oder --container-md.
• Ein beliebiger Wert in eckigen Klammern: p-[13px], grid-cols-[200px_1fr], bg-[#4f98fb]. Unterstriche stehen für Leerzeichen.
• Eine CSS-Variable in runden Klammern: bg-(--brand) ist die v4-Kurzform für bg-[var(--brand)]. In v3 hast du bg-[--brand] geschrieben.

Brüche wie w-1/2 werden zu calc(1/2 * 100%), und ein Deckkraft-Suffix wie bg-black/50 wird zu einem color-mix() mit transparent. Dadurch funktioniert es mit jedem Farbformat.

@theme-Tokens (der v4-Ersatz für tailwind.config.js)

In v4 konfigurierst du das Designsystem in CSS. Variablen, die du in @theme deklarierst, werden sowohl zu CSS Custom Properties auf :root als auch zur Quelle für Utility-Klassen. Das Präfix der Variable entscheidet, welche Utilities sie speist:

@import "tailwindcss";

@theme {
  --font-display: "Satoshi", sans-serif;   /* font-display */
  --color-brand-500: oklch(65% 0.17 255);  /* bg-brand-500, text-brand-500 ... */
  --breakpoint-3xl: 120rem;                /* 3xl: variant */
  --spacing: 0.25rem;                      /* p-4 = 1rem */
  --radius-card: 0.875rem;                 /* rounded-card */
}

Namespace	Speist	Beispiel
--color-*	jede Farb-Utility (bg, text, border, fill, ring, Schattenfarbe...)	bg-red-500
--spacing	Padding, Margin, Gap, Breite, Höhe, Inset, Translate	px-4
--font-*	Schriftfamilie	font-sans
--text-*	Schriftgröße (plus optional --text-*--line-height)	text-xl
--font-weight-*	Schriftstärke	font-bold
--tracking-* / --leading-*	Zeichenabstand / Zeilenhöhe	tracking-wide
--breakpoint-*	Responsive Varianten	sm:*
--container-*	Container-Query-Varianten und max-w-*	@sm:*, max-w-md
--radius-*	Rahmenradius	rounded-sm
--shadow-*, --inset-shadow-*, --drop-shadow-*	Schatten	shadow-md
--blur-*	Blur und Backdrop-Blur	blur-md
--ease-* / --animate-*	Timing-Funktionen / Animationen	ease-out, animate-spin
--perspective-* / --aspect-*	3D-Perspektive / Seitenverhältnis	perspective-near, aspect-video

Um einen kompletten Standard-Namespace zu entfernen, setze ihn zuerst auf initial, zum Beispiel --color-*: initial;, und deklariere dann nur deine eigenen Farben. Falls du noch eine JavaScript-Konfiguration hast, kann v4 sie mit @config "./tailwind.config.js"; laden, die Optionen corePlugins, safelist und separator werden aber nicht unterstützt.

Breakpoints

Breakpoints sind Mobile First: Eine Klasse ohne Präfix gilt bei jeder Breite, und md:flex gilt ab 48rem aufwärts. v4 schreibt sie mit der Range-Syntax width >= ....

Präfix	Mindestbreite	CSS	Darunter (max-*)
sm:	40rem (640px)	@media (width >= 40rem)	max-sm: = @media (width < 40rem)
md:	48rem (768px)	@media (width >= 48rem)	max-md:
lg:	64rem (1024px)	@media (width >= 64rem)	max-lg:
xl:	80rem (1280px)	@media (width >= 80rem)	max-xl:
2xl:	96rem (1536px)	@media (width >= 96rem)	max-2xl:

Kombiniere sie, um einen Bereich anzusprechen: md:max-xl:flex gilt nur von 48rem bis (ausschließlich) 80rem. Für einen einmaligen Breakpoint nutze min-[900px]:grid oder max-[600px]:hidden. Breakpoints fügst du mit --breakpoint-* in @theme hinzu oder änderst sie dort. Halte sie alle in rem, damit sie korrekt sortiert werden.

Container Queries

Container Queries sind in v4 eingebaut (in v3 brauchten sie ein Plugin). Markiere ein Elternelement mit @container und style die Kindelemente dann mit @sm:, @md: und so weiter. Sie reagieren auf die Breite des Elternelements statt auf das Fenster. Genau das willst du bei einer Karte, die sowohl in einer Sidebar als auch in einer breiten Hauptspalte erscheint.

<div class="@container">
  <article class="flex flex-col @md:flex-row gap-4">
    <img class="w-full @md:w-48 rounded-lg" src="..." alt="">
    <div>...</div>
  </article>
</div>

Variante	Container-Breite	Variante	Container-Breite
@3xs	16rem (256px)	@2xl	42rem (672px)
@2xs	18rem (288px)	@3xl	48rem (768px)
@xs	20rem (320px)	@4xl	56rem (896px)
@sm	24rem (384px)	@5xl	64rem (1024px)
@md	28rem (448px)	@6xl	72rem (1152px)
@lg	32rem (512px)	@7xl	80rem (1280px)
@xl	36rem (576px)

Jede wird zu @container (width >= ...) kompiliert. Nutze @max-md: für "unterhalb", kombiniere @sm:@max-md: für einen Bereich, benenne Container mit @container/sidebar und sprich sie mit @md/sidebar: an, und verwende beliebige Größen wie @min-[475px]:. Beachte, dass die Container-Größen nicht dieselben Zahlen wie die Breakpoints sind: @md ist 28rem, während md: 48rem ist.

Flex und Grid auf einen Blick

Wähle unten ein Layout und sieh zu, wie sich die Boxen bewegen. Der Klassen-String aktualisiert sich bei jedem Klick, sodass du ihn direkt in dein Markup kopieren kannst.

Die Muster, die du am häufigsten brauchst:

Ziel	Klassen
Responsives Karten-Grid ohne Breakpoints	grid grid-cols-[repeat(auto-fill,minmax(16rem,1fr))] gap-6
Sidebar plus Inhalt	grid md:grid-cols-[16rem_1fr] gap-8
Footer am unteren Rand einer kurzen Seite fixieren	flex min-h-dvh flex-col auf dem Wrapper, flex-1 auf main
Text, der in einer Flex-Zeile abgeschnitten wird	min-w-0 auf dem Flex-Kind, truncate auf dem Text
Auf Mobilgeräten gestapelt, auf dem Desktop in einer Zeile	flex flex-col md:flex-row gap-4
Das letzte Element nach rechts schieben	ms-auto (oder ml-auto) auf diesem Element

Standard-Farbpalette (OKLCH), zum Kopieren anklicken

v4 definiert die Standardpalette in OKLCH, womit auf Wide-Gamut-Bildschirmen gesättigtere Farben möglich sind. Jedes Farbfeld unten ist mit dem exakten Wert aus Tailwinds eigener Theme-Datei gefärbt. Klicke eines an, um seinen oklch()-Wert zu kopieren. Die Abstufungen reichen von 50 bis 950. Mit * markierte Paletten (mauve, olive, mist und taupe) kamen in v4.2.0 hinzu und fehlen daher in früheren v4-Versionen. Schwarz und Weiß sind #000 und #fff.

Verwende sie als bg-sky-500, text-sky-500/80 oder in deinem eigenen CSS als var(--color-sky-500). Um zu prüfen, ob eine Kombination gut lesbar ist, nutze den Farbkontrast-Checker, und für eine eigene Skala im selben Format probiere den Tailwind-Farbpaletten-Generator.

Dark Mode in v4

Standardmäßig folgt dark: dem Betriebssystem über @media (prefers-color-scheme: dark). Um ihn stattdessen über eine Klasse oder ein Attribut zu steuern (für einen manuellen Umschalter), überschreibe die Variante in deinem CSS mit @custom-variant. Einen darkMode-Konfigurationsschlüssel gibt es nicht mehr.

/* Class strategy: <html class="dark"> */
@custom-variant dark (&:where(.dark, .dark *));

/* Or a data attribute: <html data-theme="dark"> */
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

<div class="bg-white text-slate-900 dark:bg-slate-900 dark:text-slate-100">...</div>

Mit einem manuellen Umschalter setzt du die Klasse, bevor die Seite gezeichnet wird (ein kleines Inline-Script in <head>, das die gespeicherte Wahl liest), damit Besucher kein kurzes Aufblitzen des falschen Themes sehen. Eine dritte Möglichkeit ist, ganz auf dark:-Klassen zu verzichten: Definiere semantische Tokens wie --color-surface in @theme und tausche ihre Werte unter .dark, sodass eine einzige Klasse wie bg-surface in beiden Themes funktioniert.

v3 zu v4: umbenannte und geänderte Klassen

Diese Angaben stammen aus dem offiziellen Upgrade-Guide. Die Umbenennungen sind am wichtigsten, weil die alten Namen weiterhin existieren und stillschweigend ein anderes (kleineres) Ergebnis liefern.

v3	v4	Warum
shadow-sm	shadow-xs	Skala um eine Stufe nach unten verschoben, damit jede Größe einen Namen hat
shadow	shadow-sm	Gleiche Verschiebung
drop-shadow-sm / drop-shadow	drop-shadow-xs / drop-shadow-sm	Gleiche Verschiebung
blur-sm / blur	blur-xs / blur-sm	Gleiche Verschiebung (auch backdrop-blur-*)
rounded-sm	rounded-xs	Gleiche Verschiebung
rounded	rounded-sm	Gleiche Verschiebung
outline-none	outline-hidden	In v4 setzt outline-none jetzt wirklich outline-style: none
ring (3px, blue-500)	ring-3 plus eine Farbe	Ein reines ring ist jetzt 1px in currentColor
outline outline-2	outline-2	Breiten-Utilities setzen jetzt selbst einen durchgezogenen Stil
bg-opacity-50 (und text-, border-, ring-, divide-, placeholder-opacity)	bg-black/50	Entfernt, nutze den Slash-Modifier
flex-shrink-0 / flex-grow	shrink-0 / grow	Entfernte Aliasse
overflow-ellipsis	text-ellipsis	Entfernter Alias
decoration-slice / decoration-clone	box-decoration-slice / box-decoration-clone	Entfernte Aliasse
bg-[--brand]	bg-(--brand)	Neue Kurzform für CSS-Variablen
!bg-red-500	bg-red-500!	Important steht jetzt am Ende (alte Form ist veraltet)
first:*:pt-0	*:first:pt-0	Kombinierte Varianten werden jetzt von links nach rechts gelesen
tw-flex (Präfix)	tw:flex	Präfixe sehen aus wie eine Variante und stehen vorne

Verhaltensänderungen ohne Umbenennung, die beim Upgrade oft überraschen:

• Rahmen- und Divide-Farbe: Standard ist jetzt currentColor statt gray-200, deshalb wirkt ein reines border dunkel. Ergänze eine Farbe wie border-gray-200.
• Hover auf Touchscreens: hover: ist in @media (hover: hover) eingeschlossen, sodass ein Tippen keine hängenbleibenden Hover-Stile mehr auslöst.
• Buttons: Preflight gibt Buttons jetzt cursor: default, so wie der Browser. Ergänze cursor-pointer, wenn du die Hand als Mauszeiger willst.
• space-x / space-y und divide: Der Selektor wurde zu > :not(:last-child) geändert, und die Margin liegt jetzt auf der End-Seite. Wenn Abstände nicht stimmen, wechsle zu flex oder grid mit gap.
• container: Die Optionen center und padding sind weggefallen. Erweitere ihn mit @utility container { margin-inline: auto; padding-inline: 2rem; }.
• Verläufe: v4 nennt lineare Verläufe bg-linear-to-r und ergänzt bg-radial und bg-conic.
• Browser: v4 unterstützt Safari 16.4+, Chrome 111+ und Firefox 128+. Wenn du ältere Browser unterstützen musst, empfiehlt der Upgrade-Guide, bei v3.4 zu bleiben.

Das offizielle Tool npx @tailwindcss/upgrade erledigt die meisten Umbenennungen automatisch. Führe es auf einem sauberen Branch aus und prüfe den Diff, denn es kann nicht wissen, welche shadow-Klassen gleich aussehen sollen.

Dieses Cheat Sheet drucken

Diese Seite hat Druckstile: Suchfelder und Buttons werden ausgeblendet, die Tabellen schrumpfen auf eine kleinere Schrift, und das Farbraster hält seine Farbfelder zusammen. Aktiviere in den meisten Browsern im Druckdialog "Hintergrundgrafiken", sonst werden die Farbfelder leer gedruckt. Wenn du die Tabelle vorher gefiltert hast, werden nur die sichtbaren Zeilen gedruckt. So bekommst du schnell eine einseitige Übersicht nur mit den Utilities, die du nutzt.

Dieselbe print:-Variante funktioniert auch in deinen eigenen Projekten: print:hidden auf der Navigation, print:text-black auf hellem Text und print:break-inside-avoid auf Karten halten gedruckte Seiten lesbar.

Verwandte Seiten

• CSS-Button-Zustände: hover, focus-visible, active und disabled, in reinem CSS und Tailwind.
• Website-Farbschemata, um eine Palette auszuwählen, bevor du sie auf Tokens abbildest.
• Der CSS-Grid-Generator und die Komponenten-Galerie mit Tailwind-Sections zum Kopieren.

Häufige Fragen

Wo ist tailwind.config.js in Tailwind v4?

v4 wird in CSS konfiguriert. Du importierst Tailwind mit @import "tailwindcss" und deklarierst Design-Tokens in einem @theme-Block, etwa --color-brand-500 oder --breakpoint-3xl. Eine JavaScript-Konfiguration lässt sich weiterhin mit der @config-Direktive laden, die Optionen corePlugins, safelist und separator werden aber nicht unterstützt.

Was sind die Standard-Breakpoints in Tailwind v4?

sm ist 40rem (640px), md ist 48rem (768px), lg ist 64rem (1024px), xl ist 80rem (1280px) und 2xl ist 96rem (1536px). Sie sind Mobile First, md:flex gilt also ab 48rem und breiter. Nutze max-md: für Stile unterhalb eines Breakpoints und kombiniere sie, etwa md:max-xl:, für einen Bereich.

Warum sehen meine Schatten und abgerundeten Ecken nach dem Upgrade auf v4 kleiner aus?

Die Skalen für Schatten, Radius und Blur sind eine Stufe nach unten gerutscht. v3 shadow-sm ist v4 shadow-xs, v3 shadow ist v4 shadow-sm, v3 rounded-sm ist v4 rounded-xs und v3 rounded ist v4 rounded-sm. Die alten Namen kompilieren weiterhin, daher gibt es keine Fehlermeldung. Sie erzeugen nur die nächstkleinere Größe.

Wie lasse ich den Dark Mode in v4 über eine Klasse statt über die Systemeinstellung laufen?

Füge @custom-variant dark (&:where(.dark, .dark *)); in dein CSS ein. dark:-Utilities greifen dann, sobald ein Vorfahre die Klasse dark hat. Nutze stattdessen [data-theme=dark] im Selektor, wenn dir ein Data-Attribut lieber ist.

Braucht Tailwind v4 ein Plugin für Container Queries?

Nein. Container Queries sind eingebaut. Setze @container auf das Elternelement und nutze Varianten wie @sm:, @md: und @max-md: auf seinen Kindelementen. Die Container-Größen beginnen bei @3xs (16rem) und unterscheiden sich von den Seiten-Breakpoints, zum Beispiel ist @md 28rem.

Wozu kompiliert p-4 in Tailwind v4?

padding: calc(var(--spacing) * 4). Mit dem Standardwert von --spacing, 0.25rem, sind das 1rem (16px bei der Standardschriftgröße). Jede ganze Zahl funktioniert auf der Spacing-Skala ohne Konfiguration, und wenn du --spacing änderst, skalieren alle auf einmal mit.

Display

Items

Richtung

Umbruch

Hauptachse

Spalten

Querachse

Abstand

Kopiert

Klassen kopieren

Dieses Cheat Sheet drucken

Kostenlos starten · Keine Kreditkarte nötig

Verwandt: Ratgeber

• Tailwind CSS Farben
• Tailwind vs Bootstrap
• Teamseiten-Beispiele
• AGB vs. Datenschutzerklärung
• Beispiele für Danke-Seiten
• TOML vs. YAML
• Zu viele Weiterleitungen
• TypeScript-Klassen

Produkt

• KI-Website-Builder
• Unser $2M KI-Website-Builder in Ihrem Unternehmen
• Enterprise
• API-Dokumentation

Für wen

• Für Agenturen
• Für Freelancer
• Für Hosting-Anbieter
• Für SaaS-Plattformen
• Für Start-ups
• Finanzdienstleistungen
• Lösungen für das Gesundheitswesen

Funktionen

• Drag-and-drop-Editor
• SEO & Analytics
• Individuelles Branding
• Kunden-Dashboard
• Reseller-Abrechnung

Ressourcen

• Blog
• Hilfecenter
• Kostenlose Tools für Unternehmen
• Free UI Components
• Vorlagen
• Vorlagen-Sammlungen
• Website-Beispiele
• Ratgeber
• Vergleiche
• Alternativen
• Die besten
• Testberichte
• Preisübersichten
• Glossar und Anleitungen
• Integrationen
• Entwickler
• Benchmark
• Windows App

Unternehmen

• Über uns
• Preise
• Für das Partnerprogramm bewerben
• Kontakt
• Karriere
• Sicherheit
• Datenschutzerklärung
• Nutzungsbedingungen

Sitemap