Tailwind CSS ist ein Open-Source -CSS-Framework . Im Gegensatz zu anderen Frameworks wie Bootstrap bietet es keine vordefinierten Klassen für Elemente wie Schaltflächen oder Tabellen. Stattdessen erstellt es eine Liste von „Utility“-CSS-Klassen, die durch Kombination und Gestaltung jedes Elements verwendet werden können. [ 5 ] [ 6 ]

In anderen traditionellen Systemen gäbe es beispielsweise eine Klasse message-warning, die eine gelbe Hintergrundfarbe und Fettdruck anwenden würde. Um dieses Ergebnis in Tailwind zu erzielen, müsste man eine Reihe von Klassen anwenden, die von der Bibliothek erstellt wurden: bg-yellow-300und font-bold.

Stand 23. Juni 2026 hat Tailwind CSS über 95.700 Sterne auf GitHub . [ 7 ]

Merkmale

Nutzenklassen

Das Utility-First- Konzept ist das Hauptunterscheidungsmerkmal von Tailwind. [ 8 ] Anstatt Klassen um Komponenten (Schaltfläche, Panel, Menü, Textfeld usw.) zu erstellen, werden Klassen um ein bestimmtes Stilelement (gelbe Farbe, fette Schriftart, sehr große Schrift, zentriertes Element usw.) herum aufgebaut. Jede dieser Klassen wird als Utility-Klasse bezeichnet .

Tailwind CSS bietet viele Hilfsklassen, die die Kontrolle über eine große Anzahl von CSS- Eigenschaften ermöglichen, wie z. B. Farbe, Rahmen, Anzeigetyp ( display ), Schriftart, Schriftgröße, Layout und Schatten.

Beispiel: gelber Hinweis
Ergebnis Beispiel Tailwind gelbe Warnung.png
Code 
< div class = "m - 4 p-4 bg -yellow - 200 font -bold rounded-lg" > <p> Bitte seien Sie beim Füttern der Vögel vorsichtig. </p> </div>
Klassen Rückenwind CSS-Äquivalent
m-4margin:1rem;
p-4padding:1rem;
bg-yellow-200background-color:rgb(254240138);
font-boldfont-weight:700;
rounded-lgborder-radius:0.5rem;

Varianten

Tailwind bietet die Möglichkeit, eine Utility-Klasse über Media Queries nur in bestimmten Situationen anzuwenden ; dies wird als Variante bezeichnet. Varianten dienen hauptsächlich dazu, responsive Benutzeroberflächen für verschiedene Bildschirmgrößen zu gestalten. [ 9 ] Es gibt auch Varianten für die verschiedenen Zustände eines Elements, beispielsweise hover:beim Hovern, focus:bei Tastatureingaben oder active:während der Nutzung [ 10 ] oder wenn der Dunkelmodus des Browsers oder Betriebssystems aktiviert ist. [ 11 ]

Varianten bestehen aus zwei Teilen: der Bedingung, die erfüllt sein muss, und der Klasse, die angewendet wird, wenn die Bedingung erfüllt ist. Beispielsweise md:bg-yellow-400wird die Klasse angewendet, bg-yellow-400wenn die Bildschirmgröße mindestens dem für definierten Wert entspricht md.

Tailwind CSS wird mit JavaScript entwickelt , läuft über Node.js und wird mit Paketmanagern wie npm oder yarn installiert . [ 12 ]

Einstellungen und Designs

Die von Tailwind angebotenen Hilfsklassen und Varianten lassen sich über eine Konfigurationsdatei, üblicherweise .tailwind.config genannt, konfigurieren tailwind.config.js. In dieser Konfiguration können die Werte der Hilfsklassen, wie beispielsweise die Farbpalette oder die Abstände zwischen Elementen (z. B. Ränder), festgelegt werden.

Alles erstellen und bereinigen

Tailwind generiert standardmäßig alle möglichen CSS-Kombinationen basierend auf den Projekteinstellungen. Anschließend werden mithilfe eines anderen Tools wie PurgeCSS alle Dateien durchlaufen und die nicht verwendeten Klassen aus der resultierenden CSS-Datei entfernt.

Aufgrund der Vielzahl an Klassen, die durch die Anzahl der Varianten und deren Kombinationen generiert werden können, hat diese Methode die Nachteile langer Wartezeiten und großer CSS-Dateien vor der Löschung. Dieser Betriebsmodus ist in Version 3 von Tailwind CSS nicht mehr verfügbar. [ 13 ]

Just-in-Time-Modus

Der JIT-Modus ( Just-in-Time ) ist eine alternative Methode zur Generierung von CSS. Anstatt alle möglichen Klassen zu generieren und anschließend alle nicht verwendeten zu entfernen ( Tree-Shaking-Technik ), analysiert er den Inhalt von HTML-, JSX- und VUE-Dateien (oder konfigurierten Erweiterungen oder Speicherorten) und generiert sofort nur die benötigten und verwendeten Klassen.

Durch die Generierung nur des benötigten CSS reduziert JIT die Größe der CSS-Datei. Diese technische Verbesserung ermöglicht die Einführung zahlreicher neuer Varianten und Hilfsklassen sowie die dynamische Erstellung von Hilfsklassen mit beliebigen Werten mithilfe der eckigen Klammernotation (z. B. `<div>`, `<div> w-[137px]` bg-[#1da1f2]), die nicht in der Konfiguration festgelegt sind.

Ab Version 3 von Tailwind CSS ist der JIT-Modus standardmäßig aktiviert. [ 13 ]

Versionen

Tailwind CSS verwendet semantische Versionierung , um seine Versionskompatibilität zu kennzeichnen.

Siehe auch

Referenzen

  1. ^ „Tailwind Labs“ . GitHub .
  2. ^ Doe. „Release Notes: Tailwind CSS v1.0“ . Tailwind CSS . Abgerufen am 17. August 2024 .
  3. ^ „Version 4.3.1“ . 12. Juni 2026. Abgerufen am 13. Juni 2026 .
  4. ^ "Github: tailwindlabs/tailwindcss, LICENSE" . GitHub .
  5. ^ Gerchev, Ivaylo (2022). Rückenwind-CSS . Sebastopol: O'Reilly Media. ISBN 978-1-0981-4099-1OCLC  1314257318 .​
  6. ^ Rappin, Noel (2021). Modernes CSS mit flexiblem Tailwind-Styling ohne Aufwand . Raleigh: The Pragmatic Bookshelf. ISBN 978-1-68050-857-4OCLC  1277046918 .​
  7. ^ tailwindlabs/tailwindcss , Tailwind Labs, 23. Juni 2026 , abgerufen am 23. Februar 2026
  8. ^ „Utility-First – Tailwind CSS“ . tailwindcss.com . Abgerufen am 13. November 2021 .
  9. ^ „Responsive Design – Tailwind CSS“ . tailwindcss.com . Abgerufen am 13. November 2021 .
  10. ^ „Hover, Focus & Other States - Tailwind CSS“ . tailwindcss.com . Abgerufen am 13. November 2021 .
  11. ^ „Dark Mode – Tailwind CSS“ . tailwindcss.com . Abgerufen am 13. November 2021 .
  12. ^ „Installation - Tailwind CSS“ . tailwindcss.com . Abgerufen am 13. November 2021 .
  13. ^ a b "Release v3.0.0-alpha.1 tailwindlabs/tailwindcss" . GitHub . Abgerufen am 13. November 2021 .