Der ultimative Guide zu Tailwind CSS

Mit Tailwind CSS gestaltest du Oberflächen aus kleinen, wiederverwendbaren Utility-Klassen. Eine Klasse wie p-6 steuert den Innenabstand, rounded-xl die Rundung und md:grid-cols-2 das Raster ab einem mittleren Breakpoint. Die Klassen stehen direkt am jeweiligen HTML-Element; das benötigte CSS wird beim Build erzeugt.

Dieser Guide führt dich durch Tailwind CSS v4: vom lokalen Build über Theme-Variablen und responsive Komponenten bis zu häufigen Fehlern in PHP-Projekten. Die Beispiele orientieren sich an der aktuellen Tailwind-Dokumentation für v4.3.

Was bedeutet Utility-First?

Statt für jedes Element zuerst eine eigene CSS-Klasse wie .product-card zu definieren, setzt du kleinere Klassen zusammen. Das macht viele Gestaltungsentscheidungen direkt im Markup sichtbar. Tailwind ersetzt dabei weder HTML noch CSS: Semantik, Layout-Grundlagen und Barrierefreiheit bleiben wichtig.

Der Ansatz hat auch Kosten. Lange Klassenlisten können unübersichtlich werden, und wiederholte Markup-Blöcke brauchen eine sinnvolle Struktur. Wiederverwendbare Templates oder Komponenten helfen, gemeinsame Muster an einer Stelle zu pflegen. Eigenes CSS bleibt für Sonderfälle erlaubt.

Tailwind v4 lokal installieren

Für ein einfaches Projekt mit Node.js und npm reicht die Tailwind-CLI. Das folgende Beispiel geht von diesen Ordnern aus: src für das Eingabe-CSS, templates für HTML oder PHP und public für die erzeugte Datei.

npm install -D tailwindcss @tailwindcss/cli

Lege src/input.css an:

@import "tailwindcss";

/* Pfad relativ zu dieser CSS-Datei */
@source "../templates";

Starte den Build während der Entwicklung im Projektverzeichnis:

npx @tailwindcss/cli -i ./src/input.css -o ./public/app.css --watch

Binde die erzeugte Datei in dein HTML ein, sofern public das öffentliche Webroot ist:

<link rel="stylesheet" href="/app.css">

Für einen Produktionsbuild kannst du --watch durch --minify ersetzen. Die erzeugte CSS-Datei gehört in den Deployment-Prozess. Welche Dateien tatsächlich öffentlich erreichbar sind, hängt von deiner Serverkonfiguration ab. Alternativ gibt es offizielle Integrationen für Vite und PostCSS.

Was hat sich mit Version 4 geändert?

Tailwind v4 setzt stärker auf CSS-basierte Konfiguration und automatische Erkennung von Klassen in Quelldateien. Das Theme lässt sich direkt über @theme erweitern. Eine JavaScript-Konfigurationsdatei ist für viele neue Projekte nicht erforderlich; bestehende Konfigurationen können über die vorgesehenen Kompatibilitätsmechanismen eingebunden werden.

Die Build-Engine erzeugt Regeln für erkannte Klassen. Die tatsächliche Build-Dauer und die Größe der Ausgabe hängen vom Projekt, den Quellen und den verwendeten Klassen ab. Prüfe beides im eigenen Build, statt eine feste Dateigröße oder einen allgemeinen Geschwindigkeitsgewinn anzunehmen.

Vor einem Upgrade von v3 solltest du den offiziellen Upgrade-Guide und die Browser-Kompatibilität prüfen. Insbesondere bestehende Plugins, eigene Utilities und ältere Browseranforderungen können Anpassungen erforderlich machen.

Eigene Farben mit @theme definieren

Theme-Variablen verbinden Designwerte mit Utility-Klassen. Diese Ergänzung in src/input.css erzeugt unter anderem eine Klasse bg-brand-600:

@import "tailwindcss";
@source "../templates";

@theme {
  --color-brand-600: #0d9488;
  --font-display: "Inter", sans-serif;
}

Die Farbe kannst du anschließend mit bg-brand-600 verwenden. font-display nutzt die definierte Schriftfamilie; die Schriftdatei musst du selbst bereitstellen oder eine passende Systemschrift wählen. Die Theme-Dokumentation erklärt die Namensräume und die Ausgabe als CSS-Variablen.

Definiere Werte für wiederkehrende Entscheidungen wie Markenfarben und Schriften. Einzelne Sonderwerte wie mt-[17px] sind möglich, sollten aber bewusst eingesetzt werden, damit Abstände und Farben im Projekt konsistent bleiben.

Praxis: Eine responsive Karte mit zugänglichem Link

Das Beispiel nutzt eine Spalte auf kleinen Bildschirmen und zwei ab dem md-Breakpoint. Ein echter Link führt zum Inhalt; ein sichtbarer Tastaturfokus hilft bei der Bedienung ohne Maus.

<article class="grid gap-6 rounded-2xl border border-slate-200
                bg-white p-6 shadow-sm md:grid-cols-2 md:p-8">
  <div>
    <p class="text-sm font-semibold text-teal-800">Praxisguide</p>
    <h2 class="mt-2 text-2xl font-bold text-slate-950">
      Schneller zu einem klaren Layout
    </h2>
    <p class="mt-3 leading-7 text-slate-700">
      Baue ein responsives Raster aus überschaubaren Utilities.
    </p>
  </div>
  <div class="flex items-end">
    <a href="/blog/"
       class="inline-flex rounded-lg bg-teal-700 px-5 py-3
              font-semibold text-white hover:bg-teal-800
              focus-visible:outline-2 focus-visible:outline-offset-4
              focus-visible:outline-teal-800">
      Artikel entdecken
    </a>
  </div>
</article>

md: gilt ab dem entsprechenden Breakpoint aufwärts. Beginne mit dem Layout für kleine Ansichten und ergänze größere Ansichten gezielt. Teste Farben, Fokus und tatsächliche Inhalte im Browser; Utility-Klassen allein garantieren keine barrierefreie Oberfläche.

Warum fehlen manche Klassen im fertigen CSS?

Tailwind analysiert Quelldateien als Text. Dynamisch zusammengesetzte Klassennamen kann es nicht zuverlässig erkennen. Dieser PHP-Ausdruck ist daher problematisch:

<?php
// Vermeiden: Die vollständigen Klassen stehen nicht im Quelltext.
$class = 'bg-' . $color . '-600';

Ordne stattdessen erlaubten Werten vollständige Klassennamen zu:

<?php
$status = 'success'; // Beispielwert; in einer Anwendung aus der eigenen Logik beziehen.
$colors = [
    'success' => 'bg-emerald-700 text-white',
    'info' => 'bg-sky-700 text-white',
];
$class = $colors[$status] ?? $colors['info'];
?>
<span class="<?= htmlspecialchars($class, ENT_QUOTES, 'UTF-8') ?>">
  Status
</span>

Die Schlüssel der Zuordnung sind zugleich eine begrenzte Auswahl zulässiger Varianten. Prüfe außerdem den Suchpfad: Standardmäßig werden manche Quellen wie ignorierte Dateien oder node_modules nicht durchsucht. Mit @source kannst du benötigte Verzeichnisse ausdrücklich registrieren. Details und weitere Möglichkeiten stehen in der Dokumentation zur Quellenerkennung.

Komponenten, Dark Mode und Wartbarkeit

Für wiederkehrende Karten, Buttons oder Formulare lohnt sich ein gemeinsames Template. So änderst du Markup und Klassen an einer Stelle. Wenn eine Abstraktion nur einen einzelnen Sonderfall versteckt, kann direktes HTML verständlicher sein.

Varianten wie hover:, focus-visible:, dark: oder motion-reduce: ergänzen Zustände. Prüfe dabei die tatsächliche Bedienung: Ein Hover-Effekt ersetzt keinen Tastaturfokus, ein dunkles Farbschema braucht ausreichenden Kontrast und Animationen sollten auf die Bewegungseinstellungen des Systems Rücksicht nehmen. Ob dark: dem System folgt oder über einen eigenen Selektor gesteuert wird, hängt von deiner Konfiguration ab.

Performance: Build und Auslieferung prüfen

Tailwind läuft üblicherweise zur Build-Zeit. Im Browser wird das erzeugte CSS geladen; die Anzahl der HTML-Klassen allein sagt wenig über die gesamte Seitengeschwindigkeit aus. Miss deshalb die Größe der ausgelieferten CSS-Datei und betrachte zusätzlich Bilder, Schriften, JavaScript und die Serverantwort.

Für den Produktionsbetrieb sind ein minifizierter Build, korrektes Caching und passende Komprimierung am Server sinnvoll. Prüfe nach Änderungen an den Suchpfaden, ob benötigte Klassen im Build enthalten sind. Eine pauschale Größenangabe für jedes Tailwind-Projekt wäre irreführend.

Häufige Fragen zu Tailwind CSS

Muss ich CSS beherrschen?

Grundkenntnisse zu Box-Modell, Flexbox, Grid, Zuständen und responsivem Design sind sehr hilfreich. Tailwind stellt Klassen für CSS-Eigenschaften bereit; es trifft die Gestaltungsentscheidungen nicht für dich.

Brauche ich in v4 noch eine Konfigurationsdatei?

Für viele neue Projekte reicht CSS-basierte Konfiguration mit @theme. Ältere JavaScript-Konfigurationen und Plugins solltest du beim Umstieg anhand der offiziellen Upgrade-Dokumentation prüfen.

Funktioniert Tailwind mit PHP?

Ja. Entscheidend ist, dass der Build die PHP-Dateien mit den vollständigen Klassennamen durchsucht und das erzeugte CSS öffentlich ausgeliefert wird.

Weiterführende Artikel

• Alpine.js: Das perfekte Leichtgewicht: Kleine Interaktionen für serverseitig gerenderte Seiten.
• HTML5 Komplett-Tutorial: Semantisches HTML als Grundlage für dein Layout.
• Barrierefreie Websites entwickeln: Tastaturbedienung, Formulare und Kontraste prüfen.