Leitfäden

Wenn du dir schon einmal modernen Webcode angesehen und Klassennamen wie flex items-center gap-4 rounded-lg bg-blue-600 entdeckt hast, bist du Tailwind CSS begegnet. Es ist 2026 eine der beliebtesten Arten, Websites zu gestalten, und es funktioniert ganz anders als das CSS, das die meisten zuerst lernen. Dieser Leitfaden erklärt, was Tailwind ist, wie es funktioniert und ob es zu deinem Projekt passt.

Tailwind CSS ist ein Utility-First-CSS-Framework. Statt eigene Stilregeln in einer separaten Datei zu schreiben, baust du ein Design auf, indem du kleine Klassen mit nur einem Zweck direkt in dein HTML kombinierst. Eine Klasse setzt das Padding, eine andere die Farbe, eine weitere die Schriftgröße. Zusammen gestalten sie das Element, und du schreibst kaum CSS von Hand.

Wie sich Tailwind von klassischem CSS unterscheidet

Traditionelles CSS verlangt von dir, Dinge zu benennen - eine Karte, einen Button - und sie dann jeweils in einem Stylesheet zu beschreiben. Tailwind dreht das um. Es reicht dir einen großen Werkzeugkasten fertiger Utility-Klassen, und du setzt sie wie Bausteine zusammen. Das Styling lebt im Markup, direkt neben dem Element, das es betrifft, statt in einer weit entfernten Datei.

Das klingt nach einer kleinen Änderung, beseitigt aber zwei alltägliche Ärgernisse: gute Klassennamen zu erfinden und zwischen HTML und CSS-Datei hin- und herzuspringen, um sie synchron zu halten. Mit Tailwind ist das, was du im Markup siehst, auch das, was du bekommst.

Warum Entwickler es mögen

Der Hauptreiz ist Tempo und Konsistenz. Du baust direkt im HTML und nutzt dabei ein festes Design-System aus Abständen, Farben und Größen, das Tailwind mitbringt. Weil diese Werte bewusst begrenzt sind, passen die Seiten eines ganzen Teams zusammen und wirken konsistent, ohne viel Aufwand oder Streit um Pixel.

• flex - macht ein Element zu einem Flexbox-Container für das Layout
• p-4 und m-2 - setzen Padding und Margin aus einer festen Abstandsskala
• text-center - zentriert den Text innerhalb eines Elements
• bg-blue-600 und text-white - wählen eine Hintergrund- und Textfarbe aus der Palette
• rounded-lg - rundet die Ecken eines Elements ab
• shadow-md - fügt einen mittleren Schlagschatten hinzu

Tailwind hält auch die Datei klein, die du auslieferst. Es durchsucht dein Projekt, erkennt, welche Utility-Klassen du tatsächlich verwendet hast, und entfernt alles Übrige aus dem Produktions-Build. Obwohl der Werkzeugkasten riesig ist, bleibt das endgültige Stylesheet winzig - was der Seite hilft, schnell zu laden.

Der ehrliche Nachteil

Die häufige Kritik lautet, dass das Markup unübersichtlich wird. Ein einzelnes Element kann ein Dutzend Klassen tragen, was manche Entwickler anfangs hässlich oder schwer lesbar finden. Es ist ein echter Kompromiss: Du tauschst aufgeräumte CSS-Dateien gegen volleres HTML.

Die übliche Antwort ist, wiederkehrende Muster in Komponenten auszulagern - in React, Vue oder mit Tailwinds eigenen Werkzeugen - sodass du die lange Klassenliste einmal schreibst und überall wiederverwendest. So gemacht, verschwindet die Unübersichtlichkeit weitgehend, und das Tempo bleibt.

So fangen Sie mit Tailwind an

Der Einstieg ist schnell. Um es einfach auszuprobieren, kannst du das Tailwind Play CDN-Skript einbinden und ohne jeglichen Build-Schritt Utility-Klassen auf einer einfachen HTML-Seite schreiben. Es ist der schnellste Weg zum Experimentieren, auch wenn es eher für das Prototyping als für die Produktion gedacht ist.

Für ein echtes Projekt installierst du Tailwind über dein Build-Tool - ein Vite- oder PostCSS-Plugin oder die offizielle Integration für Frameworks wie Next.js, Nuxt oder SvelteKit. Ab Tailwind v4 ist die Einrichtung schlanker, wird größtenteils im CSS selbst konfiguriert, und der Build-Schritt durchsucht deine Dateien nach den Klassen, die du tatsächlich verwendest, damit das ausgelieferte Stylesheet klein bleibt. Sobald es eingebunden ist, schreibst du Klassen und das Framework erledigt den Rest.

Tailwind vs Bootstrap: utility-first oder component-first?

Das Framework, mit dem Tailwind am häufigsten verglichen wird, ist Bootstrap, und der Unterschied ist philosophisch. Bootstrap ist component-first: Es liefert fertige Komponenten wie Buttons, Cards und Navbars, die von Haus aus ein bestimmtes Aussehen haben, sodass du schnell ein fertiges Erscheinungsbild erhältst, aber zu einem wiedererkennbaren Stil tendierst. Tailwind ist utility-first: Es gibt dir die rohen Bausteine und keine vorgefertigten Komponenten, sodass du jedes gewünschte Erscheinungsbild bauen kannst, aber mehr von der Zusammenstellung selbst übernimmst.

Keines ist objektiv besser. Bootstrap kann für ein Standard-Admin-Panel oder einen Prototyp, bei dem ein konventionelles Aussehen in Ordnung ist, schneller sein. Tailwind gewinnt tendenziell, wenn du ein individuelles Design möchtest, ohne gegen die Standardvorgaben eines Frameworks anzukämpfen, und wenn ein Team Wert auf Konsistenz durch ein gemeinsames Design-System legt. Viele Entwickler, die mit Bootstrap anfangen, wechseln zu Tailwind, sobald sie mehr Kontrolle über das endgültige Erscheinungsbild wollen.

Fazit

Tailwind CSS ist ein Utility-First-Framework, das Seiten gestaltet, indem es kleine Klassen in deinem Markup zusammensetzt, gestützt auf ein eingebautes Design-System und einen winzigen Produktions-Build. Es ist nicht die einzige Art, CSS zu schreiben, und nicht für jeden - aber sein Tempo und seine Konsistenz sind der Grund, warum 2026 so viele Seiten damit gebaut werden.