Der State of CSS befragt die Webdevelopment-Community jedes Jahr nach ihren Vorlieben, unter anderem auch bei der Verwendung von CSS-Frameworks. Das Ergebnis der Umfrage ist eindeutig: Tailwind CSS ist mit 75 Prozent klar an der Spitze. An zweiter Stelle folgt Bootstrap mit 54 Prozent – die weiteren Frameworks liegen abgeschlagen unter 14 Prozent.
Das zeigt deutlich: Tailwind ist ungeheuer beliebt. Gleichzeitig verfolgt es einen eher unkonventionellen Ansatz, der von klassischen Best-Practice-Empfehlungen abweicht – dazu gleich mehr. Genau deshalb ist Tailwind auch nicht unumstritten. Auf die Debatte will ich allerdings an dieser Stelle nicht im Detail eingehen.
Wer sich mit den Vor- und Nachteilen intensiver auseinandersetzen möchte, findet eine differenzierte Betrachtung zum Beispiel unter https://measured.co/blog/tailwind-trade-offs. Wie bei jedem Tool gilt natürlich auch bei Tailwind: Es kommt immer auf den konkreten Anwendungsfall und den Nutzungskontext an.
Im Folgenden zeige ich Ihnen, wie Tailwind CSS 4.1 funktioniert und wie man es verwendet, so dass Sie sich selbst ein Bild machen können.
Tailwind CSS auf Spitzenposition
Utility First
Es gibt viele CSS-Frameworks wie Material Design, Bootstrap oder Foundation. Sie alle unterstützen die schnelle Entwicklung von Benutzeroberflächen durch vordefinierte Komponenten und Funktionen. Trotz ihrer Unterschiede folgen diese Frameworks einem gemeinsamen Grundprinzip, das ich im Folgenden exemplarisch anhand von Bootstrap erläutern werde.
Wenn ich mit Bootstrap arbeiten will, erstelle ich eine HTML-Datei, in der ich auf die CSS-Datei von Bootstrap verlinke. Einen gestalteten Button kann ich dann durch folgenden Code definieren:
<button type="button" class="btn btn-primary">Button</button>
Die Klasse btn dient zur Gestaltung des Buttons und btn-primary legt sein Farbschema fest.
Im zugehörigen Bootstrap-CSS-Stylesheet stehen dann viele Regeln wie beispielsweise die Folgenden (Ausschnitt):
Manche Formatierungen werden direkt festgelegt, bei anderen wird hingegen mit var() auf zentral definierte Variablen verwiesen.
Bootstrap bietet jede Menge Komponenten, von einfachen wie dem gerade gezeigten Button über komplexere wie Karten – die man über Klassen wie card, card-body, card-title oder card-text definiert – bis hin zu interaktiven wie Carousel, die zusätzlich JavaScript benötigen.
Sehen wir uns nun an, wie man einen Button mit Tailwind gestaltet (online austesten bei https://play.tailwindcss.com/y1KacaLDFU).
<button class="bg-blue-500 hover:bg-blue-700 text-white
font-bold py-2 px-4 rounded-sm">Button</button>
Ein mit Tailwind gestalteter Button mit Hover-Effekt (rechts)
Eine Klasse wie btn, die die Funktion beschreibt, fehlt; stattdessen werden sogenannte Utility-Klassen benutzt, d.h. wiederverwendbare Klassen für Stilregeln.
- bg-blue-500 erzeugt einen blauen Hintergrund.
- hover:bg-blue-700 sorgt für eine leicht abgedunkelte Hintergrundfarbe beim Hovern.
- text-white definiert eine weiße Textfarbe.
- font-bold macht die Schrift fett.
- py-2 steht für einen vertikalen Innenabstand (padding) in der Größe 2, was 0.5rem entspricht.
- px-4 macht dasselbe in der Horizontalen (1rem).
- rounded-sm ergänzt abgerundete Ecken in der Größe Small (0.25rem).
Die Unterschiede zu Bootstrap sind deutlich: Es gibt keine Klassennamen, die die Bedeutung der Komponente beschreiben, alle Klassennamen sind Hilfsklassen (Utility-Klassen) für die Gestaltung.
Das hat einen großen Vorteil: Wenn Sie die Optik des Buttons anpassen wollen, dann brauchen Sie nur die Klassennamen zu ändern und beispielsweise py-3 statt py-2 für größere Abstände oder bg-red-400 für eine rote Hintergrundfarbe schreiben. Und wenn eine stärkere Abrundung gewünscht ist, testen Sie einmal die Klasse rounded-md statt rounded-sm.
Tailwind CSS in Version 4.1
Mehr als Inline-Styles
Auf den ersten Blick wirkt es so, als wären Tailwind-Klassen nichts anderes als Inline-Styles wie im folgenden Beispiel:
<button style="color: white; background-color: blue">Button</button>
Allerdings können Sie über solche Inline-Styles keine Formatierungen für besondere Zustände (Hover, Focus) oder Umstände (z.B. Viewportgröße) definieren. Über die Tailwind-Klassen ist das hingegen problemlos möglich; ein Beispiel ist die Klasse hover:bg-blue-700, die wir beim Button genutzt haben. Solche Formatierungen, die nur in bestimmten Situationen gelten, werden bei Tailwind Varianten genannt.
Nur die Klassen, die man wirklich braucht
Ein Problem beim Utility-Ansatz ist die sehr große Menge an Klassen, die durch die Varianten verschärft wird. Denn zu jeder Utility-Klasse muss es noch Klassen für die verschiedenen Zustände (Hover, Focus) oder für verschiedene Viewports geben. Das würde zu einer unglaublich großen Anzahl von Klassen führen.
Tailwind löst dieses Problem sehr elegant. Es erzeugt Ihnen eine individuelle CSS-Datei für Ihr Projekt nur mit den Klassen, die Sie auch wirklich brauchen. Damit das funktioniert, müssen Sie nur die Klassen in Ihrem HTML-Code schreiben, Tailwind scannt Ihre Dateien und erzeugt Ihnen das Ausgabestylesheet, in dem dann nur die wirklich benutzten Klassen stehen.
Auch dynamisch per JavaScript hinzugefügte Klassen werden berücksichtigt, da auch die JavaScript-Dateien ausgelesen werden. Damit das klappt, müssen Sie vollständige Klassennamen angeben, die Klassennamen dürfen also nicht zusammengesetzt sein.
So geht es:
<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>
So würde es nicht gehen:
<div class="text-{{ error ? 'red' : 'green' }}-600"></div>
Tailwind CSS installieren
Da Tailwind eine angepasste CSS-Datei erstellt, genügt es nicht, nur eine CSS-Datei einzubinden wie beispielsweise bei Bootstrap: Sie müssen einen entsprechenden Build-Prozess starten, d.h. Tailwind installieren. Übrigens: Wenn Sie Tailwind erstmal nur austesten wollen, können Sie auch den Playground nutzen.
Tailwind lässt sich auf verschiedene Arten installieren, beispielsweise innerhalb des Build-Tools Vite, mit PostCSS oder man nimmt die eigenständige Tailwind CLI (Command Line Interface). Für 17 Frameworks von Angular über Laravel, Nuxt und SvelteKit bis hin zu Symfony gibt es außerdem detaillierte Guidelines für die Integration.
Ich zeige hier die Installation von Tailwind CLI. Dafür brauchen Sie zuerst Node.js. Erstellen Sie dann einen Projektordner und wechseln Sie in diesen. Dann führen Sie folgenden Befehl auf dem Terminal/der Kommandozeile aus:
npm install tailwindcss @tailwindcss/cli
Legen Sie eine HTML-Datei in Ihrem Projektordner mit dem HTML-Grundgerüst an, in der Sie auf eine CSS-Datei verweisen. Im Beispiel nenne ich diese CSS-Datei output.css. Aber wichtig: Diese Datei erstellen Sie nicht selbst, sie wird Ihnen von Tailwind erzeugt.
Schaffen Sie dann eine CSS-Datei mit Ihren CSS-Direktiven. Ich nenne sie passenderweise input.css. Hier muss zumindest die folgende Zeile stehen:
@import "tailwindcss";
Jetzt ergänzen wir in unserem HTML-Dokument innerhalb von body ein Element mit Tailwind-spezifischen Klassen, beispielsweise den bereits gezeigten Code für einen Button:
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold
py-2 px-4 rounded-sm">
Button</button>
Damit der benötigte CSS-Code in output.css generiert wird, geben Sie folgenden Befehl ein:
npx @tailwindcss/cli -i ./input.css -o ./output.css --watch
Damit teilen Sie Tailwind die Namen und Pfade der Input- und der Output-CSS-Dateien mit. Dank –watch verfolgt Tailwind alle Änderungen an den Dateien in Ihrem Projektordner.
Danach können Sie die Tailwind-Klassen einsetzen. Immer, wenn Sie in Ihrem HTML-Code eine neue Klasse schreiben, wird der entsprechende CSS-Code in output.css erzeugt.
Zwei Tipps:
- Mit npx @tailwindcss/cli –help können Sie sich alle möglichen Optionen anzeigen lassen. So ist es sinnvoll, am Schluss des Projekts zusätzlich die Parameter –optimize und –minify anzugeben, um eine kleinere Output-Datei zu erhalten.
- Wenn Sie mit Visual Studio Code arbeiten, sollten Sie sich die Erweiterung „TailwindCSS Intellisense“ holen. Sie schlägt Ihnen mögliche Klassennamen direkt bei der Eingabe vor, was die Arbeit komfortabler macht.
VS-Code-Erweiterung mit Vorschlagsliste von Tailwind-Klassen
Und das geschieht im Hintergrund
Wenn Sie @import „tailwindcss“ schreiben, wird im Hintergrund folgender Code ausgeführt:
@layer theme, base, components, utilities;
Tailwind verwendet hier die CSS-Technik Cascade-Layers (@layer). Über die Cascade Layers lassen sich Formatierungen in verschiedene CSS-Bereiche aufteilen, ohne dass man Probleme mit der Spezifität bekommt. Denn bei Cascade Layers setzen sich immer die Formatierungen aus dem später stehenden Layer durch.
Die oben angegebene Reihenfolge ermöglicht es, durch das Theme definierte Formatierungen bei Bedarf mit Utility-Klassen zu überschreiben: denn utilities steht nach theme.
Tailwind verwendet vier Layer mit folgender Funktionalität:
- theme: Dieser Bereich definiert Design-Tokens und alles, was projektspezifisch ist: Farben, Schriftarten, Abstände, Breakpoints oder auch benutzerdefinierte Variablen.
- base: Hier werden globale Stile für body, Überschriften oder Formular-Defaults definiert.
- components: In diesem Layer können Sie selbst die Gestaltung von Komponenten über semantische Klassen wie btn definieren. Standardmäßig ist dieser Layer leer.
- utilities: Klassen, die in jedem Projekt identisch funktionieren. Zum Beispiel aktiviert grid immer ein Rasterlayout (display: grid).
Praxisbeispiel
Tailwind bietet Ihnen vordefinierte Klassen für alle wesentlichen Bereiche der Gestaltung: von Layoutklassen (grid für Rasterlayouts, flex für Flexbox), Abständen (padding/margin), Typografie, Hintergrundfarben, Rahmen, Tabellenformatierungen und Transformationen bis hin zu Filtern, Effekten und Interaktivität.
Unter Effekten finden Sie Klassen für Schatten und für Masken. Bei der Interaktivität gibt es Klassen, um das Scrollverhalten zu steuern, aber auch accent-color, mit der man die Farbe von Formularelementen festlegt.
Bei den Rubriken finden Sie neben den Formatierungen, die Sie dort erwarten würden, immer auch ausgefallenere, d.h. bei der Typografie nicht nur Schriftfamilie, -größe, -dicke, sondern auch speziellere wie font-variant-numeric, durch die sich die Darstellung von Zahlen steuern lässt – sofern die benutzte Schrift das vorsieht.
Sehen wir uns ein Beispiel für eine Karte mit Bild und Text an. Sie hat verschiedene Darstellungsvariationen:
- Bei kleinem Viewport befindet sich der Text unterhalb des Bildes.
- Bei größerem Viewport stehen Text und Bild nebeneinander.
Unterschiedliche Darstellung je nach Viewportgröße
Außerdem passt sich die Karte an den Dark Mode an.
Die Karte wird über den folgenden Code erstellt:
Es gibt ein umfassendes div-Element, in dem sich zwei weitere div-Elemente befinden – das erste div-Element umfasst das Bild, das zweite die Texte.
Zu den wichtigsten Klassen:
- Das umfassende div-Element wird zum Flexcontainer (flex).
- Die Elemente sollen untereinander dargestellt (flex-col) und zentriert (items-center) sein.
- Ab der Größe Small sollen Bild und Text hingegen nebeneinander platziert werden; das Präfix sm kennzeichnet, dass diese Formatierung erst ab der Größe Small gelten soll (sm:flex-row).
- Außerdem gibt es zwei verschiedene Maximalbreiten, die eine für kleine Viewports (max-w-3xs) und die andere ab der Größe Small (sm:max-w-md).
- Die Hintergrundfarbe soll weiß sein (bg-white), bei aktiviertem Dark Mode hingegen ein dunkles Blau (dark:bg-indigo-950). Dass diese Farbe nur im Dark Mode aktiviert sein soll, kennzeichnet das Präfix dark.
- Beim Bild sind ebenfalls besondere Formatierungen für den Dark Mode festgelegt: Dieses Mal werden Filter eingesetzt: Die Helligkeit wird leicht reduziert (dark:brightness-90) und der Kontrast erhöht (dark:contrast-135).
- Bei den Texten gibt es neben den grundlegende Textformatierungen farbliche Anpassungen für den Dark Mode, die wiederum mit dem Präfix dark gekennzeichnet sind.
Sie finden das Beispiel zum Ausprobieren auch beim Tailwind Playground:
https://play.tailwindcss.com/RKOHctgnVS?size=824×720
Tipp: Informationen dazu, wie der Dark Mode funktioniert, gibt es in meinem Artikel hier auf dem Host Europe-Blog.
Vollständig responsiv
Im letzten Beispiel haben Sie gesehen, dass es möglich ist, eigene Formatierungen für bestimmte Viewportgrößen zu definieren, wir haben dabei das Präfix sm genutzt.
Tailwind bietet von Haus aus folgende Breakpoints:
sm ab 40rem (640px)
md ab 48rem (768px)
lg ab 64rem (1024px)
xl ab 80rem (1280px)
2xl ab 96rem (1536px)
Die vorgestellten Präfixe können Sie bei allen Utility-Klassen verwenden. Die Angaben gelten immer ab der jeweiligen Größe, Tailwind folgt einem Mobile First Ansatz. So wird im folgenden Beispiel Flexbox (display: flex) ab einer Größe von 640px aktiviert.
<div class="sm:flex"></div>
Für kleine Viewports unterhalb von 640px ist kein Präfix erforderlich.
Möchten Sie Formatierungen nur in einem bestimmten Größenbereich anwenden, bietet Tailwind auch dafür passende Optionen. Im folgenden Beispiel gilt die Flexbox-Aktivierung nur für die Größen Medium bis Large (d.h. kleiner als 64rem).
<div class="md:max-lg:flex"></div>
Wenn die Breakpoints nicht passen, können Sie sie auch selbst festlegen. Ergänzen Sie in Ihrem Input-Stylesheet – bei uns input.css – unterhalb von @import „tailwindcss“ einen @theme-Bereich und definieren Sie dort Ihre eigenen Breakpoints. Sie können sowohl Tailwind-Breakpoints überschreiben als auch weitere ergänzen. Die Syntax ist dieselbe, wie Sie sie von CSS-Variablen kennen, wichtig sind die beiden Bindestriche am Anfang.
Im folgenden Beispiel werden die Breakpoints xs und 2xl überschrieben sowie 3xl neu definiert.
@theme {
--breakpoint-xs: 30rem;
--breakpoint-2xl: 100rem;
--breakpoint-3xl: 120rem;
}
Noch anpassungsfähiger: Container Queries
Heute reicht es aber nicht mehr, Anpassungen nur aufgrund der Viewportgröße durchzuführen. Der Grund: Wenn ich eine Komponente entwickle, dann kann diese an unterschiedlichen Stellen im Layout platziert werden. Das Entscheidende ist dann nicht, wie groß der Viewport insgesamt ist, sondern wie viel Platz die Komponente gerade an der Stelle hat, wo sie sich befindet.
Um darauf zu reagieren, wurden in CSS die Container Queries eingeführt. Das Grundprinzip ist dasselbe wie bei Media Queries, nur dass eben Formatierungen ausgelöst werden in Abhängigkeit der Größe eines Container-Elements. Praktischerweise lassen sich auch Container Queries mit Tailwind nutzen.
Im folgenden Beispiel ist das umfassende main-Element der Container, dessen Größe relevant ist, gekennzeichnet durch die Klasse @container. Bei dem darin befindlichen div-Element ist Flexbox aktiviert, standardmäßig werden die darin befindlichen Elemente untereinander (flex-col) dargestellt, ab der Größe Medium des @container-Elements hingegen nebeneinander (@md:flex-row).
<main class="@container">
<div class="flex flex-col @md:flex-row"></div>
</main>
Das Präfix @md am Anfang des Klassennamens zeigt an, dass die Formatierung erst ab der Container-Größe Medium angewendet wird. Dabei unterscheidet sich die Einteilung der Container-Größen von den Viewportgrößen und ist deutlich feiner abgestuft: Insgesamt gibt es 13 Containergrößen – beginnend bei @3xs (ab 16rem) bis hin zu @7xl (80rem). Die Details dazu liefert Ihnen die Dokumentation.
Handling
Wenn ich jetzt eine Karte mit Tailwind gestaltet habe, und diese Karte mehrmals verwende, muss ich natürlich immer auch alle Klassen wie vorher benutzen, damit die Karte gleich aussieht. Das ist auf den ersten Blick der große Nachteil von Tailwind – im Gegensatz zu einer Herangehensweise wie bei Bootstrap, wo die Formatierungen ja innerhalb des Stylesheets einer einzelnen Klasse zugeordnet sind.
Auf verschiedene Arten lässt sich das wiederholte Schreiben derselben Klassen für Komponenten verhindern. In echten Projekten ist es ja so, dass man eine Komponente, die man mehrmals nutzen möchte, nur einmal definiert – sei es weil man ein komponentenbasiertes Framework wie VueJs nutzt oder ein Content-Management-System.
Diese erlauben es, Komponenten zentral zu definieren, die dann mehrmals eingesetzt werden, so dass sich die Änderungen zentral durchführen lassen – eben an der einen Stelle, die die Blaupause für die Komponente ist.
Falls man doch an mehreren Stellen parallel Anpassungen durchführen muss, schlägt die Tailwind-Dokumentation auch vor, mit mehrfachen Cursorn zu arbeiten, was Editoren standardmäßig anbieten.
Natürlich kann man aber auch bei @layer components eigene semantische Klassen definieren – aber damit verliert man einen Vorteil von Tailwind: Denn dann ist nicht mehr im HTML-Code ersichtlich, welche Formatierungen für die Komponente gelten, man muss dafür den CSS-Code untersuchen.
Geschickt konfigurierbar
Eine entscheidende Frage bei allen Frameworks ist immer: Wie kann ich Dinge anders umsetzen, als sie standardmäßig vom Framework vorgegeben sind?
Bei Tailwind ist natürlich relativ wenig festgelegt, es gibt nicht einen besonderen Button-Style, die Utility-Klassen lassen sich beliebig kombinieren und führen so zu immer anderen Ergebnissen.
Natürlich ist es aber so, dass bei bestimmten Features, die Längeneinheiten als Werte akzeptieren, nicht unendlich viele Möglichkeiten zur Verfügung stehen – auch wenn das theoretisch denkbar wäre. So ließen sich beispielsweise unzählige Werte für den Innenabstand (padding) definieren. In Tailwind wird jedoch eine gezielte Auswahl angeboten, etwa durch Klassen wie p-1 bis p-8.
Für Anpassungen hat Tailwind mehrere Optionen parat: Wenn ein Wert nur einmal gebraucht wird, schreiben Sie ihn in eckigen Klammern:
<div class="p-[3px]">div-Element mit 3px padding</div>
Tailwind erzeugt dann die entsprechende Klasse (die Backslashes werden wegen der eckigen Klammern im Klassennamen ergänzt):
.p-\[3px\] {
padding: 3px;
}
Häufig braucht man individuelle Werte auch beim Hinzufügen eines Hintergrundbildes:
<div class="bg-[url(beeren.jpg)]">Hintergrundbild</div>
In eckigen Klammern sind auch komplexe Ausdrücke möglich, wie bei folgender Rasterdefinition mit Gridlayout.
<div class="grid grid-cols-[1fr_500px_2fr]">dreispaltiges Raster</div>
Diese Klassen entsprechen den folgenden CSS-Regeln und definieren ein dreispaltiges Layout:
display: grid;
grid-template-columns: 1fr 500px 2fr;
In eckigen Klammern können CSS-Funktionen wie calc() genutzt werden:
<div class="rounded-[calc(0.25rem-1px)] bg-amber-600 p-3"></div>
Dadurch wird ein border-radius erzeugt, der 0.25rem-1px groß ist. Anhand des Präfixes rounded erkennt Tailwind, dass es um die Eigenschaft border-radius geht, für die der Code erzeugt werden soll.
Außerdem können Sie mit Variablen arbeiten und auf diese verweisen. Im folgenden Beispiel erhält die Variable –meinevariable den Wert green, danach wird sie als Hintergrundfarbe genutzt.
<div class=" [--meinevariable:green]">
<span class="bg-[var(--meinevariable)]">grüner Hintergrund</span>
</div>
Wenn man Variablen häufiger verwenden möchte, sollten man sie im Input-Stylesheet in einem @theme-Block schreiben, z.B.:
@theme {
--mein-padding: 1.13em;
}
Nun kann man sie benutzen::
<div class="md:p-(--mein-padding)"> …</div>
Das definiert ab der Größe Medium ein padding von 1.13em.
Eigene Design-Tokens
Eben wurde schon der @theme-Bereich für selbst definierte Variablen erwähnt. Der @theme-Bereich in Ihrem Input-Stylesheet ist auch der Bereich für alle weitergehenden Anpassungen, d.h. für all das, was das konkrete Projekt von anderen Projekten unterscheidet.
Welche Theme-Variablen Tailwind standardmäßig festlegt, finden Sie unter https://tailwindcss.com/docs/theme#default-theme-variable-reference. Alle aufgeführten Theme-Variablen lassen sich individuell definieren.
Sehen wir uns die Funktionsweise am Beispiel der Schriftenlisten an. Standardmäßig definiert Tailwind folgende:
- –font-sans: ui-sans-serif, system-ui, sans-serif, „Apple Color Emoji“, „Segoe UI Emoji“, „Segoe UI Symbol“, „Noto Color Emoji“;
- –font-serif: ui-serif, Georgia, Cambria, „Times New Roman“, Times, serif;
- –font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, „Liberation Mono“, „Courier New“, monospace;
Im @theme-Bereich können Sie andere Schriftenlisten definieren und auch zusätzliche ergänzen. Wichtig sind die beiden Bindestriche am Anfang der Namen der Variablen.
Jetzt werden die angegebenen Schriften genutzt, wenn Sie die Klasse font-sans oder font-serif angeben und Sie können die neu definierte Klasse font-cursive verwenden.
<h2 class="font-cursive">Cursive for the World</h2>
Wenn Sie möchten, können Sie das Standard-Theme vollständig deaktivieren über
--*: initial;
Dann müssen Sie allerdings alles selbst definieren.
Praktischer ist es meist, nur einzelne Bereiche von Variablen zurückzusetzen. Durch folgende Angabe werden alle Variable zurückgesetzt, die mit color beginnen:
--color-*: initial;
Es wurde schon erwähnt, dass Tailwind mit vier Layern arbeitet. Die meisten Anpassungen werden Sie wie gerade gezeigt im Theme-Layer vornehmen, aber es kann auch sinnvoll sein, Formatierungen für die anderen Layer zu bestimmen.
Grundlegende Formatierungen schreiben Sie am besten im Layer base:
@layer base {
h1 {
font-size: 4rem;
}
}
Neuerungen in Tailwind CSS Version 4
Die hier behandelte Version Tailwind CSS 4.1 ist Anfang April 2025 erschienen – die große Version 4.0 bereits im Januar desselben Jahres. Wer auf die neueste Version umsteigen möchte, kann dafür bequem das offizielle Upgrade-Tool nutzen.
Einige Neuerungen konnten Sie schon in vorherigen Beispielen sehen. Die wichtigsten Neuerungen von Tailwind CSS 4.x sind die folgenden:
- Statt der früher verwendeten @tailwind-Direktive kommt jetzt modern und unkompliziert @import zum Einsatz – was Sie auch zum Einbinden eigener CSS-Dateien verwenden können.
- Die Konfiguration erfolgt direkt über CSS-Variablen – ganz im Sinne der neuen „CSS-first configuration“. Eine separate tailwind.config.js-Datei ist nicht mehr erforderlich.
- Der Scan nach genutzten Klassen erfolgt automatisch, die Dateien, die berücksichtigt werden sollen, müssen nicht eigens in der Konfiguration angegeben werden.
- Die Erstellung des Output-Stylesheets ist schneller dank einer komplett neuen Engine.
- Tailwind verwendet moderne CSS-Features wie Cascade Layers und unterstützt neuere CSS-Angaben wie @starting-style.
- Die neue Standard-Farbpalette basiert auf OKLCH, was zu lebendigeren Farben führt, außerdem gibt es Verbesserungen bei den Farbverläufen und -Mischungen.
- Zusätzlich wurden viele Utility-Klassen umbenannt oder vereinheitlicht.
Tailwind CSS 4 funktioniert in Chrome ab Version 111, Safari ab 16.4 und Firefox ab 128. Wenn Sie ältere Browser berücksichtigen müssen, empfiehlt es sich, bei Tailwind CSS 3.x zu bleiben.
Einführung in Tailwind CSS – Fazit
Wer einmal mit Tailwind arbeitet, versteht schnell, warum es so beliebt ist. Die Anpassungsfähigkeit an individuelle Bedürfnisse überzeugt – besonders, weil sich vieles direkt über CSS-Variablen im @theme-Bereich konfigurieren lässt.
Praktisch ist auch, dass man alle Formatierungen direkt im HTML sieht und sie nicht in der externem CSS-Datei versteckt sind. Die Auswahl der unterstützten CSS-Features ist durchdacht, modern und orientiert sich an bewährten Design-Standards.
Ein weiterer großer Vorteil: Es kann nicht passieren, dass durch das Stylen einer Komponente die Gestaltung einer anderen Komponente betroffen wird. Kurz gesagt: Ausprobieren lohnt sich!
- Eine Einführung in Tailwind CSS – warum ist das Utility-First-Framework so populär? - 7. Mai 2025
- Dunkel ist besser: Wie Sie Ihre Website mit CSS an den Dark Mode anpassen - 6. November 2024
- Mehr Variation – neue und weniger bekannte Einheiten in CSS - 17. September 2024
