Tailwind CSS
| Tailwind CSS
| |
|---|---|
| |
| Basisdaten
| |
| Entwickler | Tailwind Labs |
| Erscheinungsjahr | 2019 |
| Aktuelle Version | 4.1.18[1] (11. Dezember 2025) |
| Ausführungsumgebung | Node.js |
| Programmiersprache | JavaScript |
| Lizenz | MIT |
| Tailwind CSS | |
Tailwind CSS ist ein Open-Source CSS-Framework. Im Unterschied zu anderen Frameworks wie Bootstrap, bietet es keine Reihe von vordefinierte Klassen für Elemente wie Buttons oder Tabellen. Stattdessen wird eine Liste von Utility-CSS-Klassen genutzt, die zur Gestaltung jedes HTML-Elements durch Mischen und Anpassen verwendet werden können.[2][3]
Allgemeines
[Bearbeiten | Quelltext bearbeiten]Tailwind CSS wurde ursprünglich von Adam Wathan entwickelt[4] und wurde am 1. November 2017 als Open-Source-Projekt in der Version 0.1.0 veröffentlicht.[5] Am 13. Mai 2019 erschien dann Version 1.0.
Am 7. Oktober 2025 hatte Tailwind CSS mehr als 90.200[6] Sterne auf GitHub und mehr als 24.000.000[7] wöchentliche Downloads auf npm (Zahlen können schwanken).
Es zählt bereits seit Jahren zu den beliebtesten und am weitesten verbreiteten CSS Frameworks[8] und liegt sogar deutlich vor Bootstrap.[9]
Namensherkunft
[Bearbeiten | Quelltext bearbeiten]Der Name „Tailwind“ entstand aus der Idee des Gründers, ein Open‑Source‑Projekt unter dem Branding seiner App KiteTail zu veröffentlichen: Bei der Suche nach Varianten mit „tail“ gefiel ihm „Tailwind“ — ein kurzer, eingängiger Name, der dank seiner Bedeutung („Rückenwind“) gut zur Beschleunigung passt, die das CSS‑Framework verspricht.[10]
Geschichte
[Bearbeiten | Quelltext bearbeiten]Tailwind entstand zufällig aus den CSS-Experimenten von Adam Wathan, die er ursprünglich für eigene Nebenprojekte schrieb. Gemeinsam mit Steve Schoger und später Unterstützung von Jonathan Reinink und David Hemphill entwickelte er aus wiederkehrenden kleinen Utility-Klassen ein wiederverwendbares System.
Nach anfänglicher Implementierung in Less wurde das Projekt kurz vor der Veröffentlichung 2017 komplett mit PostCSS neu geschrieben, als sich zeigte, dass das AST-basierte Vorgehen flexiblere Generierung und Anpassung erlaubt.
Unter dem Namen Tailwind CSS wurde das Framework 2019 in der Version 1.0 veröffentlicht. Seitdem wuchs es rasant und ist heute in sehr vielen modernen Webprojekten weit verbreitet.[10]
Im Unternehmen hinter dem Framework wurde Anfang 2026 drei der insgesamt vier angestellten Entwicklern gekündigt. Ursache seien die gesunkenen Besucherzahlen auf den Hilfeseiten des Projektes. KI-generierte Inhalte von Google und anderen KI-Anbietern machen den Besuch der Projekt- und Hilfeseiten zunehmend überflüssig. Nachdem nur dort die kostenpflichtigen Angebote rund um das Framework gefunden werden, brachen die Serviceeinnahmen massiv ein.[11][12]
Funktionen
[Bearbeiten | Quelltext bearbeiten]Da Tailwind in seinen Grundprinzipien deutlich von klassischen CSS‑Frameworks wie Bootstrap abweicht, sollte man die zugrunde liegende Philosophie und die grundlegende Verwendung verstehen.[3]
In anderen CSS-Frameworks würde eine Klasse message-warning, die eine gelbe Hintergrundfarbe und fetten Text hat. Um dieses Ergebnis in Tailwind zu erreichen, würde man die Klassen bg-yellow-300 und font-bold nutzen.[3]
Utility-Klassen
[Bearbeiten | Quelltext bearbeiten]Das Utility-First-Konzept ist der Hauptunterschied zu anderen CSS-Frameworks.[3][13] Anstatt CSS-Klassen für Komponenten zu erstellen (Button, Menu, Eingabefeld, …), werden Klassen für eine Design-Eigenschaft erstellt (gelbe Farbe, fette Schrift, sehr großer Text, Zentrierung, …). Jede dieser Klassen wird Utility-Klasse genannt.[2]
| Ergebnis | 
| |
|---|---|---|
| Code |
<div class="m-4 p-4 bg-yellow-200 font-bold rounded-lg">
<p>Please be careful when feeding the birds.</p>
</div>
| |
| CSS-Klassen | Tailwind | CSS Äquivalent |
| m-4 | margin: 1rem;
| |
| p-4 | padding: 1rem;
| |
| bg-yellow-200 | background-color: rgb(254 240 138);
| |
| font-bold | font-weight: 700;
| |
| rounded-lg | border-radius: 0.5rem;
| |
Varianten
[Bearbeiten | Quelltext bearbeiten]Tailwind bietet die Möglichkeit, eine Utility-Klasse nur in bestimmten Situationen über Media-Queries anzuwenden, die als Variante bezeichnet werden. Der Hauptzweck von Varianten besteht darin, eine responsive Benutzeroberfläche für verschiedene Bildschirmgrößen zu entwerfen.[14] Es gibt auch Varianten für die verschiedenen Zustände, die ein Element haben kann, wie z. B. hover: wenn sich der Cursor über dem Element befindet, focus: bei Auswahl mit der Tastatur oder active: bei Verwendung,[2][15] oder wenn im Browser oder Betriebssystem der Dark Mode aktiviert ist.[16]
Varianten bestehen aus zwei Teilen: der zu erfüllenden Bedingung und der Klasse, die angewendet wird, wenn die Bedingung erfüllt ist. Beispielsweise wendet die Variante md:bg-yellow-400 die Klasse bg-yellow-400 an, wenn die Bildschirmgröße mindestens dem für md definierten Wert entspricht.
Tailwind CSS wird in JavaScript entwickelt, läuft in Node.js und wird mit Paketmanagern wie npm oder yarn installiert.[17]
Konfiguration
[Bearbeiten | Quelltext bearbeiten]Die von Tailwind angebotenen Utility-Klassen und -Varianten lassen sich über eine Konfigurationsdatei konfigurieren, die üblicherweise tailwind.config.js heißt. In der Konfiguration lassen sich die Werte der Utility-Klassen festlegen, beispielsweise die Farben oder die Abstände zwischen Elementen.[2]
Ab Version 4 können alle Konfigurationen in einer CSS-Datei vorgenommen werden, anstatt die tailwind.config.js Datei zu nutzen. Dabei bietet die neue Konfiguration die gleichen Möglichkeiten, wie die alte, einschließlich der Konfiguration von Design-Tokens, eigener Varianten in dem Einbinden von Plugins.[18]
Build all and purge
[Bearbeiten | Quelltext bearbeiten]Der Standardmodus von Tailwind besteht darin, dass das System alle möglichen CSS-Kombinationen basierend auf den Projekteinstellungen generiert. Anschließend werden mithilfe eines anderen Dienstprogramms wie PurgeCSS alle Dateien durchsucht und die nicht verwendeten Klassen aus der resultierenden CSS-Datei entfernt.
Aufgrund der Anzahl der Klassen, die durch die Anzahl der Varianten und deren Kombinationen generiert werden können, hat diese Methode den Nachteil langer Wartezeiten und großer CSS-Dateien, bevor sie gelöscht werden. Diese Vorgehensweise ist in Version 3 von Tailwind CSS nicht mehr verfügbar.[19]
Just-in-time-Modus
[Bearbeiten | Quelltext bearbeiten]Der JIT‑Modus (Just‑In‑Time) erzeugt CSS auf Anfrage, statt im Voraus alle möglichen Klassen zu bauen und anschließend per Tree‑Shaking wieder zu entfernen. Dabei werden die Inhalte der Projektdateien (z. B. HTML, JSX, Vue oder andere konfigurierte Dateien/Orte) analysiert und nur die Klassen, die tatsächlich verwendet werden, generiert.
Durch diesen Ansatz wird die generierte CSS‑Datei deutlich kleiner, da unnötige Klassen wegfallen. Außerdem erlaubt JIT das dynamische Erzeugen vieler zusätzlicher Varianten und Hilfsklassen — einschließlich solcher mit beliebigen Werten, die nicht in der Konfiguration vorkommen. Solche dynamischen Klassen werden über die eckige‑Klammer‑Notation definiert, z. B. w-[137px] oder bg-[#1da1f2].
Ab Version 3 ist der JIT-Modus Standard.[19]
Nachteile
[Bearbeiten | Quelltext bearbeiten]Tailwind CSS überschreibt standardmäßig alle vordefinierten CSS-Regeln des Browsers für HTML-Elemente, sodass diese neu definiert werden müssen. Außerdem kann die Definition der Stile im HTML-Markup zu einem unübersichtlicheren Code führen, weil sich die Menge des Codes stark erhöht. Dadurch kommt es schnell zu wiederholten Stil-Definitionen, was dem Grundsatz „Don’t repeat yourself!“ widersprechen kann.[20]
Versionen
[Bearbeiten | Quelltext bearbeiten]Tailwind CSS nutzt semantische Versionierung, um Kompatibilität zwischen verschiedenen Versionen anzugeben.
Weblinks
[Bearbeiten | Quelltext bearbeiten]Einzelnachweise
[Bearbeiten | Quelltext bearbeiten]- ↑ Release 4.1.18. 11. Dezember 2025 (abgerufen am 13. Dezember 2025).
- ↑ a b c d Ivaylo Gerchev: Tailwind CSS: Craft Beatiful, Flexible and Responsive Designs. Hrsg.: SitePoint Pty. Ltd. 2022, ISBN 978-1-09-814099-1.
- ↑ a b c d Noel Rappin: Modern CSS with Tailwind. Pragmatic Bookshelf, 2021, ISBN 978-1-68050-818-5.
- ↑ Dieter Petereit: Tailwind CSS: Wie das Beiprodukt eines Seitenprojekts zu einem Multimillionengeschäft wurde. In: t3n. 8. August 2020, abgerufen am 17. November 2025.
- ↑ Adam Wathan: Release v0.1.0. In: GitHub. 1. November 2017, abgerufen am 17. November 2025.
- ↑ Tailwind CSS GitHub. In: GitHub. Abgerufen am 7. Oktober 2025 (englisch).
- ↑ Tailwind CSS NPM. In: NPM. Abgerufen am 7. Oktober 2025 (englisch).
- ↑ Maika Möbus: State of CSS: Die beliebtesten CSS-Frameworks und Entwicklerzufriedenheit. In: heise online. 17. Dezember 2021, abgerufen am 7. Januar 2025.
- ↑ State of CSS 2025: Other Tools. 2025, abgerufen am 7. Januar 2025 (englisch).
- ↑ a b The Story of Tailwind CSS feat. Adam Wathan. In: offerzen Blog. 26. August 2022, abgerufen am 24. Dezember 2025 (englisch).
- ↑ Matthias Bastian: Tailwind-CSS-Debakel zeigt, wie KI-Assistenten etablierte Online-Geschäftsmodelle austrocknen. In: The Decoder. 8. Januar 2026, abgerufen am 8. Januar 2026.
- ↑ Barry Schwartz: Tailwind CSS Lets Go Of 75% Of Engineering Team After 40% Traffic Drop To Docs From Google. In: Search Engine Roundtable. 8. Januar 2026, abgerufen am 8. Januar 2026 (englisch).
- ↑ Utility-First - Tailwind CSS. In: tailwindcss.com. Abgerufen am 13. November 2021 (englisch).
- ↑ Responsive Design - Tailwind CSS. In: tailwindcss.com. Abgerufen am 13. November 2021 (englisch).
- ↑ Hover, Focus, & Other States - Tailwind CSS. In: tailwindcss.com. Abgerufen am 13. November 2021 (englisch).
- ↑ How to Enable Dark Mode in Tailwind CSS ? In: GeeksforGeeks. 24. Juli 2025, abgerufen am 23. Dezember 2025 (englisch).
- ↑ Installation - Tailwind CSS. In: tailwindcss.com. Abgerufen am 13. November 2021 (englisch).
- ↑ Adam Wathan: Tailwind CSS v4.0. In: Tailwind CSS. Tailwind Labs Inc, 22. Januar 2025, abgerufen am 24. November 2025 (englisch).
- ↑ a b Release: v3.0.0-alpha.1. In: GitHub. 1. Oktober 2021, abgerufen am 17. November 2025 (englisch).
- ↑ IONOS Redaktion: Tailwind CSS: Das zeichnet das Utility-First-Framework aus. In: IONOS Digital Guide. 21. Juni 2022, abgerufen am 23. Dezember 2025.