Tailwind CSS

Tailwind CSS ist ein Utility-First-CSS-Framework, das eine Seite mit kleinen Klassen für jeweils einen Zweck gestaltet, die direkt im HTML stehen. Klassen wie p-4, text-center und bg-blue-500 setzen jeweils einen Stil. Entwickler kombinieren diese Klassen zu jedem beliebigen Design, ohne viel eigenes CSS zu schreiben.

Utility-First-CSS bedeutet, ein Design aus vielen kleinen Klassen aufzubauen, die jeweils eine Sache tun, statt für jede Komponente eine eigene Klasse zu schreiben. Ein Button erhält sein Aussehen aus Klassen für Innenabstand, Farbe, Eckenradius und Schriftstärke. So bleiben die Stile nah am Markup, und es entstehen keine immer weiter wachsenden Stylesheets.

Entwickler wählen Tailwind CSS, weil es das Gestalten beschleunigt und die fertige CSS-Datei klein hält. Man muss keine Klassennamen erfinden und nicht für jede Änderung zwischen HTML- und CSS-Dateien wechseln. Tailwind CSS bietet zudem eine einheitliche Skala für Abstände, Farben und Schriftgrößen, die ein Design ordentlich hält.

Tailwind CSS liefert einfache Utility-Klassen für ein eigenes Design, Bootstrap fertige Komponenten wie Navigationsleisten, Cards und Modals. Bootstrap ist schneller für einen Standard-Look mit wenig Designarbeit. Tailwind CSS ist besser, wenn ein Projekt ein eigenes Design braucht, ohne gegen ein vorgegebenes Theme anzukämpfen.

Tailwind CSS wird über npm installiert und mit dem Build-Werkzeug des Projekts verbunden, etwa Vite, PostCSS oder der Tailwind CLI. In Tailwind CSS Version 4 fügen Sie das Paket hinzu und importieren es oben in Ihrer Haupt-CSS-Datei mit @import "tailwindcss". Die offizielle Installationsanleitung enthält kurze Schritte für alle gängigen Frameworks, darunter Laravel, Next.js und Vite.

Tailwind CSS ist für Anfänger geeignet, die grundlegende CSS-Eigenschaften wie margin, padding, Flexbox und Grid bereits verstehen. Jede Tailwind-Klasse entspricht einer echten CSS-Eigenschaft, wer also zuerst CSS lernt, liest die Klassen mühelos. Anfänger, die die CSS-Grundlagen überspringen, tun sich oft schwer, Layouts in Tailwind CSS zu korrigieren.

Die meisten Entwickler mit CSS-Kenntnissen arbeiten nach wenigen Tagen produktiv mit Tailwind CSS. Die Klassennamen folgen klaren Mustern, wer eine Gruppe kennt, kann den Rest erraten. Responsive Varianten, eigene Themes und Komponentenmuster sicher zu beherrschen dauert einige Wochen echter Nutzung.

Responsives Design funktioniert in Tailwind CSS über Breakpoint-Präfixe wie sm:, md: und lg: vor einer beliebigen Utility-Klasse. Tailwind CSS arbeitet nach dem Mobile-First-Prinzip, eine Klasse ohne Präfix gilt also für alle Bildschirme, eine mit Präfix ab diesem Breakpoint aufwärts. So ergibt text-sm md:text-lg kleine Schrift auf Smartphones und größere auf breiteren Bildschirmen.

Die Standard-Breakpoints in Tailwind CSS sind sm bei 640 Pixeln, md bei 768 Pixeln, lg bei 1024 Pixeln, xl bei 1280 Pixeln und 2xl bei 1536 Pixeln. Jeder Breakpoint ist eine Mindestbreite, passend zum Mobile-First-Ansatz von Tailwind. Ein Projekt kann diese Werte in seinen Theme-Einstellungen ändern oder neue Breakpoints ergänzen.

Einen Dark Mode bauen Sie, indem Sie das Präfix dark: vor eine Klasse setzen, etwa dark:bg-gray-900. Standardmäßig folgt Tailwind CSS der Einstellung des Betriebssystems des Besuchers. Sollen Nutzer den Dark Mode per Button umschalten, konfigurieren Sie die dark-Variante so, dass sie von einer Klasse oder einem data-Attribut auf der Seite abhängt.

In Tailwind CSS Version 4 passen Sie Farben und Schriften mit CSS-Variablen in einem @theme-Block Ihrer Haupt-CSS-Datei an. Eine Variable wie --color-brand erzeugt automatisch Klassen wie bg-brand und text-brand. Ältere Versionen nutzten dafür eine Datei tailwind.config.js, und dieser Weg funktioniert in Version 4 über eine Kompatibilitätsoption weiterhin.

Tailwind CSS kann HTML unruhig wirken lassen, weil ein Element viele Klassen tragen kann. Die meisten Teams lösen das, indem sie wiederkehrende Muster in Komponenten ihres Frameworks auslagern, etwa in Blade-, React- oder Vue-Komponenten. Der Vorteil ist, dass die Stile direkt neben dem Markup sichtbar bleiben, was Änderungen schnell und sicher macht.

Tailwind CSS durchsucht die Dateien des Projekts und erzeugt nur die Klassen, die tatsächlich verwendet werden. Ungenutzte Utilities gelangen nie ins fertige Stylesheet. Eine typische Produktions-CSS-Datei mit Tailwind CSS ist klein, selbst bei großen Websites.

Mit der @apply-Direktive nutzen Sie Tailwind-Utility-Klassen innerhalb Ihrer eigenen CSS-Regeln. Das ist praktisch, um Inhalte zu gestalten, die Sie nicht selbst steuern, etwa HTML aus einem Texteditor. Das Tailwind-Team empfiehlt, sie sparsam einzusetzen, denn Komponenten sind meist der sauberere Weg, Stile wiederzuverwenden.

Ja, Tailwind CSS arbeitet gut mit Laravel zusammen, und neue Laravel-Projekte sind bereits für die Nutzung mit Vite eingerichtet. Sie schreiben Tailwind-Klassen in Blade-Templates, und Vite erzeugt das fertige CSS. Auch die Starter-Kits von Laravel nutzen Tailwind CSS für ihre Anmelde- und Dashboard-Seiten.

Ja, Tailwind CSS funktioniert mit React, Vue, Svelte und den meisten anderen JavaScript-Frameworks. Die Klassen stehen im Markup der Komponente, in React über className und in Vue über class. Da jede Komponente ihre eigenen Klassen trägt, passt Tailwind CSS gut zu komponentenbasierten Frameworks.

Tailwind CSS hat keinen direkten Einfluss auf das Ranking, kann SEO aber indirekt unterstützen, weil die CSS-Datei klein und die Seiten schnell bleiben. Die Ladegeschwindigkeit gehört zu den Signalen für die Seitennutzung bei Google. Inhalt, Seitenstruktur und HTML-Semantik zählen aber weit mehr als das Gestaltungswerkzeug.

Mit Arbitrary Values nutzen Sie in Tailwind CSS einen exakten Wert, der nicht im Theme steht, indem Sie ihn in eckige Klammern schreiben. So erzeugt w-[37%] oder top-[117px] sofort eine Klasse für genau diesen Wert. Arbitrary Values eignen sich für Einzelfälle, ein häufig genutzter Wert gehört dagegen ins Theme.

Hover- und Fokus-Zustände funktionieren über ein Zustandspräfix wie hover:, focus: oder active: vor einer Utility-Klasse. So macht bg-blue-500 hover:bg-blue-600 einen Button dunkler, wenn die Maus darüber steht. Präfixe lassen sich mit Breakpoints und Dark Mode kombinieren, etwa md:hover:underline.

Nein, Tailwind CSS selbst enthält nur Utility-Klassen, keine fertigen Komponenten wie Modals oder Navigationsleisten. Fertige Komponenten kommen aus separaten Sammlungen wie dem offiziellen Tailwind Plus oder Community-Bibliotheken wie daisyUI und Flowbite. Viele Teams bauen auf den Utilities ihren eigenen kleinen Komponentensatz auf.

Ja, Tailwind CSS unterstützt Rechts-nach-links-Layouts über die Varianten rtl: und ltr: sowie logische Utility-Klassen. Logische Klassen wie ms-4 und pe-2 setzen Außen- und Innenabstand am Anfang oder Ende einer Zeile und drehen sich im Arabischen automatisch um. So funktioniert ein einziges Markup für englische und arabische Seiten.

Tailwind CSS Version 4 hat die Konfiguration mit dem @theme-Block und einer einzigen @import-Zeile ins CSS verlegt. Version 4 brachte außerdem eine schnellere Build-Engine, die automatische Erkennung von Inhaltsdateien und moderne CSS-Funktionen wie Cascade Layers. Die meisten Projekte, die von Version 3 umsteigen, können ihren Code mit dem offiziellen Upgrade-Werkzeug aktualisieren.

Tailwind CSS passt oft nicht, wenn ein Projekt einen vollständigen Satz fertiger Komponenten mit kaum eigenem Design braucht oder das Team lieber klassisches CSS schreibt. Eine kleine statische Seite mit wenigen Stilen braucht womöglich gar kein Framework. Am meisten lohnt sich Tailwind CSS bei Projekten mit eigenem Design, die ständig wachsen.

Sie lagern wiederkehrende Muster in Komponenten aus und sortieren die Klassen in einer einheitlichen Reihenfolge. Das offizielle Prettier-Plugin für Tailwind CSS sortiert Klassen beim Speichern automatisch. Wer Markenfarben und Abstände im Theme festlegt, hält die Klassen zudem kurz und einheitlich.

Ja, Tailwind CSS ist Open Source unter der MIT-Lizenz und darf in privaten und kommerziellen Projekten genutzt werden. Die Lizenz erlaubt, Tailwind CSS in jedem Produkt zu verwenden, zu verändern und auszuliefern. Der Quellcode liegt öffentlich auf GitHub, wo ihn jeder lesen und Probleme melden kann.