Tailwind CSS

Tailwind CSS ist ein modernes CSS-Framework, das einen radikal anderen Ansatz verfolgt als Bootstrap oder Material UI. Statt vordefinierter Komponenten (Button, Card, etc.) bietet Tailwind Low-Level Utility-Classes für jede CSS-Eigenschaft: "text-blue-500" für blauen Text, "p-4" für Padding, "flex" für Flexbox. Komponenten werden durch Kombination dieser Utilities gebaut.

Der Vorteil: Maximale Flexibilität ohne Framework-Einschränkungen. Kein CSS-File mit überschriebenen Styles. Kein Kampf gegen Framework-Defaults. Tailwind ist extrem performant - durch PurgeCSS werden nur die tatsächlich genutzten Classes in die finale CSS-Datei aufgenommen, typischerweise < 10KB. Die Entwicklungsgeschwindigkeit ist hoch - Styling erfolgt direkt im HTML/JSX ohne Context-Switch zu separaten CSS-Files.

Tailwind hat sich zum beliebtesten CSS-Framework entwickelt und wird von großen Unternehmen wie GitHub, Shopify und Vercel eingesetzt. Die Lernkurve ist flach, die Produktivität hoch. Mit Tailwind UI und Headless UI stehen zusätzlich vorgefertigte Komponenten zur Verfügung. Für moderne Web-Apps ist Tailwind die erste Wahl.

Mit Version 4 (Anfang 2025) wurde Tailwind grundlegend überarbeitet: Die Konfiguration wandert von der JavaScript-Datei tailwind.config.js in CSS-Direktiven wie @theme und @source, die neue Oxide-Engine (in Rust geschrieben) beschleunigt Builds um ein Vielfaches, und das frühere PurgeCSS-Konzept wurde durch automatische Content-Erkennung ersetzt. Design-Token wie Farben und Abstände werden nun als CSS-Variablen exponiert, was Theming und die Integration mit Component-Libraries wie shadcn/ui deutlich vereinfacht. Genau dieses Setup nutzt das Nexus-Monorepo, in dem jede App über eine eigene Theme-CSS ihre Marke definiert.

Der Utility-First-Ansatz polarisiert: Kritiker bemängeln überladene Klassenlisten im Markup, die HTML schwer lesbar machen. In der Praxis löst man das, indem wiederkehrende Muster in Komponenten gekapselt werden - nicht in @apply-Sammelklassen, die den Utility-Vorteil wieder aufheben und offiziell nur sparsam empfohlen sind. Für konsistente Varianten kombiniert man Tailwind gern mit class-variance-authority (cva) und dem cn()-Helfer zum konfliktfreien Zusammenführen von Klassen. Ein weiterer Vorteil gegenüber CSS-in-JS: Tailwind erzeugt statisches CSS ohne Laufzeitkosten und ist damit ideal für Server-Komponenten in Next.js, wo zur Laufzeit generierte Styles Probleme bereiten.