Tailwind CSS hat die Art, wie Entwickler Webseiten stylen, grundlegend verändert. Statt CSS-Klassen in separaten Dateien zu definieren, schreibt man beim Utility-First-Ansatz sämtliche Stilangaben direkt als kleine, funktionale Klassen in das HTML. Das klingt zunächst ungewohnt, erweist sich in der Praxis aber als äußerst produktiv – besonders für Teams, die schnell iterieren müssen.
Was ist Utility-First CSS und warum Tailwind?
Traditionelles CSS folgt dem Prinzip: Man erstellt semantische Klassen wie .card oder .button-primary und weist ihnen Stileigenschaften zu. Das führt zu langen CSS-Dateien, Namenskonflikten und dem sogenannten Specificity-Chaos. Beim Utility-First-Ansatz gibt es für jede CSS-Eigenschaft eine dedizierte Klasse: p-4 für padding: 1rem, text-blue-500 für eine blaue Textfarbe, flex für display: flex.
Tailwind CSS ist mit über 82.000 GitHub-Sternen das dominante Framework in diesem Bereich. Es wurde 2017 von Adam Wathan entwickelt und hat seitdem eine riesige Community aufgebaut. Seit Version 4 (2025) nutzt Tailwind CSS einen nativen CSS-Parser statt der Node.js-Pipeline und ist damit nochmals schneller geworden.
Installation – npm oder CDN
Für Produktionsprojekte empfiehlt sich die Installation über npm. In einem bestehenden Projekt reichen drei Befehle:
npm install tailwindcss @tailwindcss/vite
# In tailwind.css:
@import "tailwindcss";Für schnelle Prototypen und Experimente bietet Tailwind auch einen CDN-Playground an. Über <script src="https://cdn.tailwindcss.com"></script> kann man sofort loslegen, ohne Build-Setup. Diesen Ansatz sollte man jedoch nicht für Produktionsseiten verwenden, da die CDN-Version alle Klassen enthält und deutlich größer ist.
Das Klassen-System im Überblick
Tailwind folgt einer konsistenten Benennung. Sobald man die Muster versteht, kann man neue Klassen intuitiv erschließen. Die folgende Tabelle zeigt die wichtigsten Kategorien mit Beispielen:
| Kategorie | Beispiel-Klasse | Entsprechendes CSS |
|---|---|---|
| Abstände (Padding) | p-4 / px-2 / pt-6 | padding: 1rem |
| Abstände (Margin) | m-auto / mb-8 | margin-bottom: 2rem |
| Farben (Text) | text-blue-500 | color: #3b82f6 |
| Farben (Hintergrund) | bg-gray-100 | background-color: #f3f4f6 |
| Typografie | text-xl font-bold | font-size: 1.25rem; font-weight: 700 |
| Flexbox | flex items-center gap-4 | display: flex; align-items: center; gap: 1rem |
| Grid | grid grid-cols-3 | display: grid; grid-template-columns: repeat(3, 1fr) |
| Breite / Höhe | w-full h-screen | width: 100%; height: 100vh |
| Rounded Corners | rounded-lg | border-radius: 0.5rem |
| Schatten | shadow-md | box-shadow: ... |
Responsive Breakpoints
Tailwind verwendet einen Mobile-First-Ansatz. Klassen ohne Präfix gelten für alle Bildschirmgrößen. Mit Präfixen wie sm:, md:, lg: oder xl: definiert man Stile ab einem bestimmten Breakpoint:
<div class="text-sm md:text-base lg:text-xl">Responsiver Text</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">...</div>Die Standard-Breakpoints sind: sm (640 px), md (768 px), lg (1024 px), xl (1280 px), 2xl (1536 px). Eigene Breakpoints können in der Konfiguration definiert werden.
Dark Mode
Tailwind unterstützt Dark Mode über den dark:-Präfix. Mit dark:bg-gray-900 dark:text-white definiert man Stile, die aktiv werden, wenn das Betriebssystem oder die Webseite im Dunkelmodus betrieben wird. Standardmäßig nutzt Tailwind die prefers-color-scheme Media Query, alternativ kann man per Klasse auf dem HTML-Element umschalten.
Komponenten mit @apply
Wer häufig verwendete Klassen-Kombinationen in einer einzigen Klasse zusammenfassen möchte, nutzt die @apply-Direktive:
.btn-primary {
@apply bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700;
}@apply widerspricht dem Utility-First-Gedanken und führt zurück zu den Problemen klassischer CSS-Ansätze. Nutze @apply sparsam, bevorzugt für wiederverwendbare UI-Basiskomponenten.
Tailwind vs. Bootstrap vs. Bulma
| Kriterium | Tailwind CSS | Bootstrap 5 | Bulma |
|---|---|---|---|
| Ansatz | Utility-First | Komponenten-basiert | Komponenten-basiert |
| Bundle-Größe (Prod.) | ~5–15 KB | ~30 KB (min+gzip) | ~20 KB (min+gzip) |
| JavaScript-Abhängigkeit | keine | optional (Popper.js) | keine |
| Design-System | eigenes Design | Bootstrap-Look | eigenes Design |
| Lernkurve | mittel | gering | gering |
| Dark Mode | eingebaut | manuell | manuell |
| Community / Ökosystem | sehr groß | sehr groß | mittel |
Externe Ressourcen
- Tailwind CSS – Offizielle Dokumentation
- shadcn/ui – Komponentenbibliothek für Tailwind
- Tailwind UI – Offizielle Komponenten
- Tailwind CSS Playground
Häufig gestellte Fragen
- Wird das HTML nicht unlesbar mit so vielen Klassen?
- Das ist der häufigste Einwand gegen Tailwind. In der Praxis gewöhnen sich die meisten Entwickler schnell an die Klassen-Syntax. In Komponenten-Frameworks wie React oder Vue werden Elemente ohnehin in kleine, wiederverwendbare Einheiten aufgeteilt, sodass die Klassen pro Element überschaubar bleiben. Prettier-Plugins sortieren die Klassen zudem automatisch.
- Wie groß ist die finale CSS-Datei in Produktion?
- Dank des integrierten PurgeCSS-Mechanismus (ab Tailwind v3 auch JIT-Compiler genannt) enthält die finale Produktionsdatei nur die tatsächlich verwendeten Klassen. Typische Projekte landen bei 5 bis 20 Kilobyte, weit weniger als klassische Frameworks.
- Funktioniert Tailwind mit serverseitig gerenderten Seiten (z. B. PHP, Laravel)?
- Ja. Tailwind scannt alle konfigurierten Dateipfade nach Klassen und generiert das CSS daraus. Das funktioniert mit Blade-Templates in Laravel, Twig in Symfony oder jeder anderen Template-Engine, solange die Dateipfade in der Tailwind-Konfiguration angegeben sind.
- Was ist der Unterschied zwischen Tailwind CSS und Tailwind UI?
- Tailwind CSS ist das Open-Source-Framework, das kostenlos genutzt werden kann. Tailwind UI ist eine kostenpflichtige Komponentenbibliothek des gleichen Teams, die fertige, hochwertige UI-Bausteine wie Navigation, Formulare oder Modals bereitstellt.