Tailwind CSS und Utility-First-Styling

Kurz: Tailwind CSS liefert viele kleine Hilfsklassen wie p-4 oder text-center, mit denen man Oberflächen direkt im HTML gestaltet, statt eigene CSS-Klassen zu schreiben.

Genauer: Klassisches CSS trennt Struktur (HTML) und Aussehen (CSS) und verlangt Klassennamen („card-title“). Utility-First dreht das um: Jede Klasse tut eine Sache, und man kombiniert sie.

Im Detail

Beispiel

<button class="rounded-lg bg-blue-600 px-4 py-2 font-semibold text-white hover:bg-blue-700">
  Speichern
</button>

px-4 = horizontales Padding, bg-blue-600 = Hintergrund, hover: = bei Mauszeiger. Statt .btn { … } zu schreiben, setzt man Klassen am Element.

Responsiv, Zustände, Dunkelmodus

Präfixe steuern Bedingungen: md:flex (ab mittleren Bildschirmen), lg:grid-cols-3, dark:bg-slate-900 (Dunkelmodus), focus:ring, disabled:opacity-50. Das Mobile-First-Prinzip gilt: Klassen ohne Präfix gelten überall, Präfixe ab einer Breite. Eine zentrale Konfiguration (Farben, Abstände, Schriften) definiert das Designsystem.

Vorteile und Nachteile

Vorteile: schnell prototypen, keine Namensprobleme, kein totes CSS (nur genutzte Klassen landen in der fertigen Datei, kleine Dateigröße), einheitliche Abstände und Farben. Nachteile: lange Klassenlisten im HTML, Lernaufwand für die Klassennamen, weniger Trennung von Struktur und Stil. Gegenmittel: Komponenten (React, Vue) fassen wiederkehrende Klassen zusammen; @apply ist möglich, aber sparsam zu nutzen.

Vergleich und Einstieg

Alternativen: CSS Modules, styled-components, klassische BEM-Namenskonvention, Frameworks wie Bootstrap (fertige Komponenten statt Bausteine) oder UnoCSS. Tailwind lässt sich mit Next.js, Vite und anderen Werkzeugen einrichten; achte auf Barrierefreiheit (Kontrast, Fokus-Stile), denn Hilfsklassen ersetzen nicht das Nachdenken darüber.

Siehe auch: Bootstrap, Responsive Design, Flexbox, Grid, Sass