Webdesign · Entwicklung · SEO
Tailwind CSS
Tailwind CSS erklärt: Klassen, Aufbau & Praxis | scinet
Redaktionell geprüft ·
Verständlich erklärt
Tailwind CSS ist ein CSS-Framework, mit dem du Oberflächen aus kleinen Gestaltungsklassen zusammensetzt. Eine Klasse steuert beispielsweise den Abstand, eine andere die Textfarbe. Diese Klassen heißen Utilities. Du kombinierst sie direkt im HTML und entwickelst daraus deine eigenen Bausteine.
Vielleicht wirkt das beim ersten Blick auf den Code ziemlich voll. Das ist verständlich. Die Idee dahinter ist, Gestaltungsentscheidungen an der Stelle sichtbar zu machen, an der das Element entsteht. Du bekommst dafür ein System von Regeln und Werten. Wie deine Website aussehen soll, entscheidest du weiterhin selbst. Dieser Eintrag beschreibt den Ansatz von Tailwind CSS 4.
So wird aus Klassen eine Oberfläche
Stell dir eine Karte mit einer Überschrift und einem Kontaktlink vor. Mit p-6 gibst du ihr Innenabstand, mit rounded-lg abgerundete Ecken. Ein Präfix wie md: verändert eine Eigenschaft ab einer bestimmten Bildschirmbreite. Für Zustände wie Tastaturfokus gibt es ebenfalls Varianten.
Diese Regeln sind weiterhin CSS. Du musst also verstehen, was Abstände, Layout und Kontraste bewirken. Tailwind nimmt dir das Schreiben vieler eigener Selektoren ab. Es trifft aber keine inhaltliche Entscheidung darüber, ob dein Kontaktlink verständlich beschriftet oder gut erreichbar ist.
Auf einen Blick
Theme und Build gehören zusammen
In Tailwind 4 legst du Theme-Werte über @theme in CSS fest. Daraus können passende Utilities entstehen, beispielsweise für deine Markenfarben. Das hilft dir, dieselben Entscheidungen an mehreren Stellen wiederzuverwenden.
Beim Build durchsucht Tailwind die relevanten Quelldateien nach Klassennamen. Schreibe Varianten deshalb als vollständige Klassen aus. Ein zusammengesetzter Text wie bg- plus eine Farbe aus der Datenbank wird nicht automatisch als fertige Klasse erkannt. Der Play CDN eignet sich zum Ausprobieren; für eine produktive Website ist er laut Dokumentation nicht vorgesehen.
Wann ich Tailwind in Betracht ziehen würde
Für ein eigenständiges Design mit wiederverwendbaren Komponenten kann Tailwind gut passen. Eine gemeinsame Vorlage für alle Angebotskarten verhindert dann, dass dieselbe Klassenliste an zwanzig Stellen unabhängig gepflegt wird.
Ich würde vor der Entscheidung eine echte Seite aufbauen: mit langen Überschriften, einem Formular und der mobilen Ansicht. Kommt dein Team damit gut zurecht? Ist der Build dokumentiert? Können spätere Änderungen an einer zentralen Komponente erfolgen? Diese Fragen sagen dir mehr als die Anzahl der Klassen im HTML. Eine kleine bestehende Website braucht keinen Umstieg, nur weil ein anderes Werkzeug gerade interessant klingt.
Der Unterschied zu Bootstrap und Bulma
Bootstrap und Bulma bieten bereits gestaltete Komponenten als Ausgangspunkt. Tailwind CSS stellt vor allem die kleinen Gestaltungsregeln bereit. Zusätzliche Komponentenbibliotheken können darauf aufbauen, sind aber eine eigene Entscheidung.
Für ein Dialogfenster reicht eine hübsche Fläche allein nicht. Öffnen, Schließen, Fokus und Tastaturbedienung müssen ebenfalls stimmen. Plane diese Arbeit mit ein, wenn du Werkzeuge vergleichst. Eine schlanke CSS-Datei ist zudem nur ein Teil der Ladezeit: Bilder, Schriften und JavaScript gehören in dieselbe Betrachtung.
Passend dazu: Bulma · Design-Tokens · CSS-Variablen · Bootstrap 6 Alpha im Vergleich.
Codebeispiel aus der Praxis
Eine einfache Kontaktkarte
Eigenes Beispiel. Voraussetzung ist ein eingerichteter Tailwind-4-Build, der diese Datei erfasst. Der Link bleibt ein normales HTML-Element.
<article class="rounded-lg border border-slate-300 p-6">
<h2 class="text-xl font-semibold">Dein Projekt</h2>
<p class="mt-3">Erzähl mir, was du vorhast.</p>
<a class="mt-4 inline-block underline focus-visible:outline-2"
href="/de/kontakt/">Projekt besprechen</a>
</article>Quellen und weiterführende Informationen
- Dokumentation Styling with utility classes Tailwind CSS · Geprüft
- Dokumentation Theme variables Tailwind CSS · Geprüft
- Dokumentation Detecting classes in source files Tailwind CSS · Geprüft
- Dokumentation Play CDN Tailwind CSS · Geprüft
