CSS-Framework Tailwind
Flexibles Design ohne semantische Klassen
E s gibt bereits zahlreiche CSS Frameworks, die Webentwicklern mit vorbereiteten Klassen und Komponenten die Arbeit erleichtern und für ein konsistentes Design sorgen. Zu den bekanntesten gehören Bootstrap, Foundation und Materialize. Daneben gibt es zahlreiche weitere, wie zum Beispiel Bulma, PureCSS oder Primer. Neue Frameworks haben es schwer, neben all den anderen Fuß zu fassen. Daher ist es umso erstaunlicher, dass sich Tailwind CSS in den letzten Jahren so rasant entwickelt hat und ein regelrechter Hype um das Projekt entstanden ist ( tailwindcss.com). Im Sommer 2020 hat es die Marke von zehn Millionen Downloads geknackt. Und auch bei der Umfrage State of CSS 2020 hat das Framework sehr gut abgeschnitten ( stateofcss.com, siehe Gra ken). Tailwind ist sicher nicht für jeden Entwickler die richtige Wahl. Aber da immer mehr Projekte auf Tailwind setzen, lohnt es sich, das Framework einmal selbst genauer unter die Lupe zu nehmen. Tailwind CSS unterscheidet sich in seiner Arbeitsweise deutlich von anderen Tools und etablierten Konzepten für Klassen. Der Ansatz nennt sich utility- rst. Gemeint ist damit, sehr kleinteilige Klassen in HTML einzusetzen. Am einfachsten ist es, sich ein kleines Beispiel anzuschauen.
Eine einfache Fehlermeldung
Um die grundlegenden Funktionen von Tailwind CSS zu testen, reicht es, wenn Sie die Basis-Version des Frameworks über einen externen Link einbinden:
Eine Fehlermeldung könnte in Tailwind CSS dann so aussehen:
Hinweis: Passwort und Benutzername dürfen nicht gleich sein.
Hierbei sorgen die Klassen text-white und font-bold dafür, dass der Absatz p in weiß und fett gesetzt wird. Der div-Container erhält über das p-4 ein Padding von 1rem.
Die Root-Größe beträgt in Tailwind 16 Pixel. Ein padding von 1rem entspricht diesen 16 Pixel. Die Klasse max-w-sm sorgt für eine maximale Breite von 24rem (also maximal 384 Pixel), das mx-auto ergänzt links und rechts den Wert auto für margin, sodass der Container in die Mitte rückt. Mit roundedxl runden Sie die Ecken ab, shadow-xl steht für einen großen Schatten, und bg-red-600 sorgt für einen roten Hintergrund. An diesem Beispiel sehen Sie schon: Tailwind ist für Leute gedacht, die sich mit CSS auskennen und auf einen Blick ableiten können, dass p für padding, w für width und bg für background stehen. In der Regel dient eine Klasse für ein oder zwei Anweisungen in CSS. Das ist das, was mit dem Ansatz utility- rst gemeint ist.
Wo bleibt die Semantik?
Wenn Sie in den letzten Jahren Projekte mit CSS umgesetzt haben, werden Sie vermutlich bereits mit dem Kopf schütteln. Die vielen Klassen sind umfangreich und nicht schön anzusehen. Noch dazu enthält der Code keinen semantischen Aufbau. Dabei sind semantische Klassen, die einer logischen Struktur folgen, doch das, was sich in den letzten zehn Jahren im professionellen Webdesign entwickelt hat. Schauen Sie sich den Code für eine Card im Framework Bootstrap zum Vergleich an ( bit.ly/3beqoma):
src="…" alt="…">
…
…
Hier hat das umschließende div die Klasse card, benannt nach der inhaltlichen Funktion der Komponente. Die inneren Elemente gehören alle zur Einheit card und erhalten daher Klassennamen wie card-title und card-text. Ein semantischer Aufbau für die Fehlermeldung könnte so aussehen:
Hinweis: Passwort und Benutzername dürfen nicht gleich sein.
Hier wäre message die Klasse für eine normale Statusmeldung, zum Beispiel in weißer Schrift auf grünem Grund. Mit der Klasse error sorgen Sie für eine Abwandlung, sodass der Text in Weiß auf Rot erscheint.
Semantische Klassen vs. utility- rst
Während viele Frameworks mit semantischen Klassen arbeiten, macht Tailwind CSS genau das Gegenteil. Klassen sind nicht semantisch, sondern nach ihrer Funktion bzw. nach dem Effekt auf das Design benannt. Daran muss man sich als FrontendEntwickler erst einmal gewöhnen.
Aber warum sollten Utility-Klassen besser sein als die herkömmliche, semantische Herangehensweise? Adam Wathan, der Autor von Tailwind, hat einen langen Artikel darüber geschrieben, warum semantische Namen für Klassen dazu führen, dass das CSS seiner Meinung nach langfristig schwieriger zu handhaben ist ( bit.ly/3ntlrbx). Wenn Sie ein neues Projekt aufsetzen, ist es recht einfach, sinnvolle Namen für die Klassen zu nden. Die Inhalte und das Design sind abgesprochen, HTML und CSS lassen sich daraus ableiten. In der Praxis entwickeln sich Projekte aber weiter, und Komponenten werden schnell komplizierter. Nehmen wir eine Website für ein Museum. Auf der Startseite gibt es Teaser für aktuelle Ausstellungen und einzelne Termine, etwa
Lesungen und Führungen. Die semantische Klasse für die Teaser könnte event-teaser heißen. Ein paar Monate später sollen zu diesen Teasern aber auch Teaser auf Seiten ergänzt werden, die Künstler vorstellen. Alle Teaser sollen gleich aussehen. Sie könnten einfach die Klasse event-teaser übernehmen, aber das passt semantisch nicht für die neuen Inhalte. Sie könnten die Klasse artist-teaser einführen, aber das würde bedeuten, den Code für event-teaser und artist-teaser zu doppeln. Sie könnten stattdessen einfach teaser wählen und, falls nötig, durch zwei ergänzende Klassen zwischen teaser event und teaser artist unterscheiden. Dann müssten Sie auch alle HTML-Templates ändern, die die alte Klasse event-teaser beinhalten. Jede dieser Optionen ist denkbar, aber keine ist ideal. Das Ganze wird unübersichtlicher, wenn mehrere Entwickler am CSS arbeiten und über Jahre mal hier, mal dort Änderungen vorgenommen werden. In der Regel wächst das CSS dabei an, weil niemand den ganzen Code überblickt und vermeintlich über üssiger Code besser nicht gelöscht wird, bevor doch irgendwo etwas kaputt geht.
Diese Probleme entstehen mit den BasisKlassen in Tailwind CSS nicht. Bei neuen Elementen müssen Sie weder über semantische Namen noch eine sinnvolle Struktur dieser Namen nachdenken. Sie vergeben einfach die nötigen kleinteiligen TailwindKlassen. Das CSS wächst auch nicht unnötig an; zumindest nicht, solange Sie mit den vorbereiteten Klassen auskommen. Das kann für manche Teams und Projekte eine Menge Arbeit sparen.
Außerdem haben Sie den Vorteil, dass Sie weitgehend oder auch ausschließlich in HTML arbeiten und nicht ständig zwischen HTML und CSS wechseln. Dazu müssen Sie natürlich wissen, welche Klassen Tailwind zur Verfügung stellt und was diese bewirken. Aber solch einen Lernprozess gibt es bei allen Frameworks. Wenn Sie sich ein eigenes Projekt nach einigen Monaten wieder ansehen, müssen Sie oft nachschlagen, was diese und jene semantische Klasse an konkreten Anweisungen enthalten. Das können Sie in Tailwind direkt ablesen, weil die Klassen so kleinteilig sind.
Hover, Fokus und andere Zustände
Auch das Design für benötigte Pseudoklassen können Sie direkt im HTML erledigen. Dazu ergänzen Sie die üblichen TailwindKlassen mit entsprechenden Pre xes. In diesem Beispiel ändert der Button bei hover und focus die Farbe:
Tailwind unterstützt eine ganze Reihe Pseudoklassen; weit mehr als Sie für die meisten Projekte benötigen. Die Liste beinhaltet hover, focus, active, visited, disabled, focus-visible, focus-within, motion-safe, motion-reduce, checked, rst-child, lastchild, odd-child und even-child.
Dazu kommen Klassen für Gruppen von Elementen, etwa für den Fall, dass bei einem Hover ein Element innerhalb eines divs geändert werden muss.
Responsive Webdesign
Tailwind sieht per Default fünf Breakpoints vor, die ebenfalls über Pre xes angesprochen werden. Diese Breakpoints richten sich nach üblichen Gerätegrößen: Das Pre x sm gilt für eine minimale Breite von 640 Pixel, dann folgen md (768 Pixel), lg (1024 Pixel), xl (1280 Pixel) und 2xl (1536 Pixel). Das Framework ist darauf ausgerichtet, mit min-width zu arbeiten. Klassen für maxwidth gibt es erst einmal nicht. Sie starten also mit Klassen ohne Pre xes für Breiten ab 1 Pixel und überschreiben diese, wenn nötig, für breitere Geräte. Der folgende Code ändert beispielsweise die Schriftgröße auf Geräten mit einer Breite über 1024 Pixel:
Hallo, ich ändere meine Größe.
So können Sie eine komplette, responsive Website vollständig über HTML-Templates aufsetzen, ohne selbst CSS zu schreiben.
Tailwind mit Build Prozess
Bisher haben wir Tailwind lediglich als fertig kompilierte CSS-Datei genutzt. Das reicht für erste Tests, aber fortgeschrittene Features können Sie so nicht einsetzen. Tailwind CSS ist auch nicht dafür gedacht, dass Sie eine vorbereitete Datei nutzen. Stattdessen ist es nötig, das Framework in einen Build Prozess einzubinden. Der Build Prozess hängt etwas davon ab, mit welchen anderen Frameworks und Tools Sie arbeiten. Die Tailwind-Dokumentation enthält entsprechende Guides für Next.js, Vue 3, Laravel, Nuxt.js, React Apps, Gatsby und PostCSS ( bit.ly/3nbHpzI).
Effektiv starten Sie mit den Basis-Klassen von Tailwind, ändern diese über die Kon - gurationsdatei, ergänzen ggf. eigenes CSS und löschen am Ende alle Tailwind-Klassen, die Sie nicht benötigen, mit PurgeCSS (siehe Infokasten).
Die Kon guration nehmen Sie über eine optionale Datei tailwind.con g.js vor. Damit können Sie die Default-Werte von Tailwind überschreiben. So können Sie etwa neue Default-Farbwerte und Schriftarten festlegen. Oder Sie ändern die Werte für die bisherigen Breakpoints und fügen weitere hinzu ( bit.ly/3i1TVkc).
Außerdem besteht die Möglichkeit, CSS für grundlegende HTML-Elemente sowie eigene Klassennamen zu ergänzen. Tailwind arbeitet mit drei Layern für die Bereiche base, components und utilities. Wenn Sie nun zum Beispiel alle h2 mit bestimmten Styles anzeigen wollten, wäre es nicht ef zient, jedes Mal in HTML dieselben Klassen anwenden zu müssen. Stattdessen können Sie das CSS für den Layer base mit eigenen Styles erweitern. Das funktioniert über @apply:
@tailwind base; @tailwind components; @tailwind utilities; @layer base { h2 {
@apply text-xl; } }
Diese Prinzip können Sie auch nutzen, um viele kleine Tailwind-Klassen zu einer eigenen Klasse zusammenzufassen, etwa für einen Button: @layer components { .btn-primary {
@apply py-2 px-4 bg-red-500 text-white font-semibold rounded-lg shadow-md
hover:bg-blue-700 focus:ring-2 focus:ring-blue-400 } }
Nach diesem Schema könnten Sie Ihr Layout zwar nun wieder über semantische Klassen regeln, aber das würde dem Zweck von Tailwind CSS widersprechen.
Fazit
Zweifelsohne hat Tailwind CSS bereits viele Anwender überzeugen können. Es gibt zahlreiche Anleitungen, wie Sie Tailwind mit WordPress, Drupal, Joomla, Kirby und anderen CMS nutzen. Dazu kommen viele Hilfen wie Tailwind Cheat Sheets, Websites mit vorbereiteten Komponenten und Themes, Anleitungen für Build-Prozesse und Tools, die Ihnen bei der Entwicklung mit Tailwind helfen, etwa die Browser Dev Tools ( ui-devtools.com).
Der radikale Ansatz von Tailwind CSS wird aber nicht jeden Entwickler überzeugen. Gerade wenn Sie seit Jahren semantisches CSS schreiben, ist es nötig, sich in Ruhe in das Framework einzuarbeiten und in einem Projekt auszuprobieren.