© cgterminal/Shutterstock.com
Neuer Rückenwind für Stylesheets oder nur ein laues Lüftchen?

Tailwind: ein Utility-first Framework für CSS


Applikationscode mit Tailwind sieht im ersten Schritt furchtbar aus. Jedes Element hat sehr viele Klassen, die bestimmte Stylingaspekte beschreiben. Es fühlt sich sehr ausführlich an und mehr nach einem Rückschritt denn nach einem Schritt in die Zukunft. Doch was ist Tailwind überhaupt und womit sollte man es vergleichen? Diese und andere Fragen beantworten wir in diesem Artikel.

Kurz und knapp: Tailwind ist ein Low-Level CSS Framework, mit dem sich beliebige Layouts schnell und einfach umsetzen lassen. Eine etwas längere Antwort könnte lauten: Am ehesten ist Tailwind mit Lösungen wie Bootstrap oder Material UI vergleichbar. Diese haben allerdings den Nachteil, dass Applikationen, die mit ihnen umgesetzt werden, sehr ähnlich aussehen. Dieses Problem haben Sie bei Tailwind nicht, da es hier keine vorgefertigten Komponenten gibt, sondern lediglich Hilfsklassen, die Sie direkt im HTML-Code Ihrer Applikation verwenden und beliebig kombinieren können. Das Framework bietet also ein hohes Maß an Flexibilität und macht keine Einschränkungen, wenn es um das Styling Ihrer Applikation geht. Tailwind selbst macht auf seiner Webseite eine ganze Reihe von Versprechen, die wir uns im Folgenden im Detail ansehen. Darüber hinaus setzen wir Tailwind in einer kleinen Applikation ein, damit die Verwendung von der Installation über die Implementierung von Frontends bis zum Build der Applikation deutlich wird.

Was ist die Idee hinter Tailwind?

Tailwind ist ein Utility-first Framework. Es legt seinen Schwerpunkt auf die sogenannten Utility-Klassen und stellt, anders als andere Frameworks, keine vorgefertigten Komponenten zur Verfügung. Einige dieser Utility-Klassen kennen Sie aus anderen Frameworks wie beispielsweise Bootstrap, wo Sie mit den Spacing Utilitys die Innen- und Außenabstände festlegen können. So steht .mr-3 in Bootstrap für margin-right: 1rem;. Tailwind führt diesen Ansatz noch deutlich weiter und bietet für nahezu alle Aspekte des Stylings einer Webapplikation eine Lösung.

Die Arbeit mit dem Framework fühlt sich stellenweise stark nach (zu Recht) verpöntem Inline-Styling an. Auf den zweiten Blick stimmt das so jedoch nicht. Bei In-line-Styling haben Sie die Freiheit, aus allen verfügbaren Werten zu wählen. Die Utility-Klassen schränken diese Freiheit deutlich ein und bieten eine festgelegte Auswahl, beispielsweise für Abstände und Farben. Doch woher kommt unser schlechtes Gefühl, wenn wir das erste Mal auf eine HTML-Datei blicken, die mit Tailwind gestylt wurde? Adam Wathan, der Schöpfer von Tailwind, hat einen interessanten Blogartikel zu diesem Thema und seiner Reise auf dem Weg zu Tailwind geschrieben. Dem Ganzen liegt der Begriff Separation of Concerns zugrunde. HTML legt die Struktur der Webseite fest, CSS ist für das gute Aussehen zuständig und JavaScript kümmert sich um die Logik. Alle drei Elemente sind unabhängig voneinander und liegen in separaten Dateien.

Und dann kommen plötzlich Werkzeuge um die Ecke, die uns die Arbeit erleichtern sollen und brechen mit diesem zentralen Paradigma. Tailwind ist nicht das einzige Beispiel. Werfen wir doch mal einen Blick auf React beziehungsweise auf JSX. Ist JSX nicht auch nur eine Vermischung von JavaScript und HTML? Genau das ist es – aber mit dem Vorteil, dass React auf eine separate Template Engine verzichtet und der Code einer Komponente deklarativ und aus einem Guss entsteht. Natürlich können Sie in React auf JSX verzichten und Ihre Komponenten komplett mit React.createElement-Aufrufen übersähen, das macht nur in der Praxis kein Entwickler. Vielmehr gibt es Menschen, die JSX auch in anderen Kontexten wie beispielsweise in Vue-Applikationen einsetzen. Das Ganze fällt jedoch unter die Kategorie „persönliche Präferenz“.

Hinzu kommt, dass diese ganze Separation of Concerns-Geschichte nur oberflächlich funktioniert. In vielen Applikationen findet man Klassen wie profile-picture oder Ähnliches. Diese Klassen nutzt dann das Stylesheet der Applikation, um den Inhalt zu stylen. Damit hängt das Styling jedoch an der Struktur der Applikation und es liegt viel Wissen um die Struktur und den Aufbau des HTML-Dokuments im Stylesheet. Tailwind dreht das um und verschiebt das Wissen über Stylingdetails ins HTML. Aber führt das nicht zu sehr vielen Duplikaten im HTML? Diese Frage ist berechtigt, allerdings gibt es auch hierfür Lösungen. Tailwind verbietet Ihnen nicht, eigene Klassen zu erstellen. Gerade für die Fälle, in denen Sie die gleichen Styles einheitlich auf mehrere Elemente anwenden möchten und es sich nicht nur um eine oder zwei Klassen handelt, ergibt es Sinn, eine eigene CSS-Klasse zu definieren. Eine weitere Alternative besteht darin, einen komponentenbasierten Ansatz zu verfolgen. Dieser Architekturansatz bildet die Grundlage für die großen JavaScript Frameworks und Libraries wie React, Angular und Vue. In diesem Fall definieren Sie nicht an mehreren Stellen in Ihrer Applikation Button-Elemente und stylen sie, sondern Sie erstellen eine allgemeingültige Button-Komponente, die überall in Ihrer Applikation zum Einsatz kommt. Anpassungen an der Funktionalität oder dem Styling finden dann an einer zentralen Stelle statt und wirken sich auf die gesamte Applikation aus. Und damit wären wir auch schon beim nächsten Thema: Sie können Tailwind hervorragend mit diesen Frameworks zusammen nutzen. Bevor wir uns das am Beispiel von React ansehen, werfen wir zunächst einen Blick auf die Kernfeatures von Tailwind.

Installation und erste Schritte

Wie alle modernen Werkzeuge kann auch Tailwind über einen beliebigen Paketmanager wie npm oder Yarn installiert werden. Eine Alternative ist die Verwendung der bereits gebauten Variante im CDN. Diese Art unterliegt jedoch einigen Einschränkungen:

  • Sie können das Standard-Theme nicht anpassen.

  • Direktiven wie @apply sind nicht verfügbar.

  • Zusätzliche Varianten wie group-focus können nicht aktiviert werden.

  • Es werden keine Plug-ins unterstützt.

  • Nicht verwendete Styles können nicht per Tree Shaking entfernt werden.

Diesen Einschränkungen steht eine sehr einfache Einbindung entgegen: Sie fügen ein link-Element in Ihr HTML-Dokument ein und können sofort mit Tailwind starten. Die css-Datei ist unter [1] verfügbar. Diese direkte Einbindung ist gerade für kleine Applikationen und schnelle Prototypen empfehlenswert. Bei einer größeren Applikation sollten Sie Tailwind lokal installieren, damit haben Sie die volle Kontrolle über das Framework und können sämtliche Features nutzen. Mit nur wenigen Schritten können Sie Tailwind in Ihre Applikation einbinden:

  1. Installation: Mit dem Kommando npm install tailwindcss installieren Sie das Tailwind-Paket in Ihrer Applikation.

  2. Erstellen einer Konfiguration: Tailwind besteht nicht nur aus einer Reihe von CSS-Klassen, sondern stellt Ihnen auch ein Kommandozeilenwerkzeug zur Verfügung. Damit können Sie beispielsweise die initiale Konfiguration für Ihre Applikation erzeugen lassen. Das Kommando npx tailwindcss init erstellt die Datei tailwind.config.js im Wurzelverzeichnis der Applikation. Die Datei enthält lediglich eine Basisstruktur, die Sie je nach Anforderungen erweitern können. Dieser Schritt ist optional, da Tailwind in einfachen Projekten auch ohne diese Konfiguration funktioniert.

  3. Einbindung ins CSS Ihrer Applikation: Damit Sie in den Genuss von Tailwind in Ihrer Applikation kommen, müssen Sie das Framework in Ihre Applikation einbinden. Nachdem sich Tailwind nur auf der Ebene von CSS bewegt und keine weiteren HTML-Strukturen oder JavaScript-Logik mitbringt, beschränkt sich die Integration auf eine CSS-Datei. In diese fügen Sie zumindest den folgenden Quellcode ein:

    @tailwind base; @tailwind components; @tailwind utilities;
  4. Tailwind arbeitet mit Direktiven, wie beispielsweise @tailwind, um dem Build-Werkzeug mitzuteilen, dass an dieser Stelle etwa die grundlegenden Klassen, Komponenten und Werkzeuge eingefügt werden sollen. Während des Build...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Gewinner-Teams

Wir bieten Lizenz-Lösungen für Teams jeder Größe: Finden Sie heraus, welche Lösung am besten zu Ihnen passt.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang