Ein Schritt in die Zukunft: TailwindCSS präsentiert Just-in-Time-Compiler
Das Utility-Framework hebt sich von der Masse an Konkurrenten ab. Ein neuer JIT-Compiler bringt zusätzliche Features und soll bestehende Fehler beheben.
(Bild: Sepp photography/Shutterstock.com)
- Timo Zander
Das Cascading Style Sheets (CSS) Framework Tailwind erfreut sich bei Entwicklerinnen und Entwicklern groĂźer Beliebtheit: Mit der Utility-First-Philosophie setzt es darauf, HTML-Markup mithilfe Dutzender CSS-Klassen individuell zu gestalten, statt auf vordefinierte Komponenten Ă la Bootstrap oder Bulma zu setzen. Mit einem Just-in-Time-Compiler (JIT) sollen nun zwei zentrale Kritikpunkte verschwinden.
Utility first statt obskurer Klassennamen
Beim Erstellen von HTML-Komponenten geraten Entwickler oft in die Bredouille, für jedes Element einen eigenen CSS-Klassennamen zu benötigen (siehe Listing 1). Das führt nicht nur zu teils äußerst zweckmäßigen Namensgebungen, sondern doppelt letztlich auch die Struktur der Komponente im Stylesheet. Dieses Problem ist so alt wie CSS selbst, und daher haben sich auch diverse Strategien entwickelt, die es lösen sollen: Die bekannteste davon ist wohl die "Block, Element, Modifier (BEM)"-Methode. Sie unterteilt DOM-Elemente in drei Kategorien: Blöcke (wie .header {}), Elemente, die in solchen Blöcken Verwendung finden (z. B. .header__title {}), und mögliche Modifier (etwa .btn--orange {}), die die Grundform von Elementen variieren.
<div class="chat-notification">
<div class="chat-notification-logo-wrapper">
<img class="chat-notification-logo" src="/img/logo.svg" alt="Chat Logo">
</div>
<div class="chat-notification-content">
<h4 class="chat-notification-title">Chat</h4>
<p class="chat-notification-message">Sie haben eine Nachricht!</p>
</div>
</div>Listing 1: CSS-Komponente fĂĽr eine Chat-Benachrichtigung
Die Utility-First-Idee von TailwindCSS wendet sich von Namensstrategien ab und vermeidet eigens erstellte Klassen. Statt Komponenten eine bestimmte CSS-Klasse zuzuordnen, lässt sich das Styling direkt im HTML-Markup vornehmen. So wird ein Text beispielsweise durch die Klasse text-center zentriert und mithilfe von font-bold fettgedruckt (siehe Listing 2). Was auf den ersten Blick nur wie schickeres Inline-CSS aussieht, hat laut den Tailwind-Entwicklern aber mehrere Vorteile. Festgelegte Größen und Einheiten helfen, sogenannte magische Zahlen (Magic Numbers) zu vermeiden und ein konsistentes Farb- und Maßsystem zu erstellen. Zudem sind alle Tailwind-Klassen responsiv und lassen sich somit für bestimmte Endgeräte, Viewport-Größen oder Client-Präferenzen – etwa Dark Mode – individualisieren. Auch Zustände wie Hover oder Focus können mit purem Inline-CSS nicht gesondert angesprochen werden, Tailwind-Klassen erlauben das jedoch: Ein Button kann so etwa beim Hovern die Hintergrundfarbe ändern.
<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
<div class="flex-shrink-0">
<img class="h-12 w-12" src="/img/logo.svg" alt="Chat Logo">
</div>
<div>
<div class="text-xl font-medium text-black">Chat</div>
<p class="text-gray-500">Sie haben eine Nachricht!</p>
</div>
</div>Listing 2: Chatbenachrichtigung mit TailwindCSS implementiert
Tailwind-Gründer Adam Wathan selbst plädiert auf Twitter und in seinen Talks regelmäßig dafür, das Framework auszuprobieren: Die komfortable und schnelle Nutzung spreche für sich und begeistere, sodass die augenscheinlichen Kritikpunkte schnell verschwänden. Des Weiteren offenbaren sich einige der Vorteile von Tailwind erst bei dessen Nutzung. Die umfangreiche Dokumentation lehrt beispielsweise nicht nur das Framework, sondern bringt Nutzerinnen und Nutzern auch reines CSS näher. Eine häufig genannte Schwäche anderer CSS-Frameworks, nämlich die zu starke Abstraktion des eigentlichen CSS-Codes und die fehlende Beschäftigung mit der Sprache, vermeidet Tailwind. Auch ist ein großer Vorteil, dass sich mit Tailwind gestaltetes HTML-Markup meist einfach zwischen Projekten kopieren lässt: Es ist kein aufwendiges Zusammentragen der genutzten CSS-Klassen in den Stylesheets nötig.
Viele Entwickler scheinen von Tailwinds Philosophie ĂĽberzeugt zu sein: So finden sich "in freier Wildbahn" zunehmend mit Tailwind erstellte Seiten auch von bekannten Unternehmen und Organisationen wie Clubhouse oder dem Jet Propulsion Laboratory der NASA.
