Tailwind CSS: Das zeichnet das Utility-First-Framework aus

Tailwind CSS ist ein Utility-First-Framework, das es Nutzerinnen und Nutzern erlaubt, Komponenten eigenständig zu definieren. Das CSS ist sehr beliebt, erfordert allerdings umfangreiche Vorkenntnisse.

Ein CSS-Framework ist eine Sammlung von Funktionen und Elementen, die für das Design einer Website benötigt werden. Da Entwicklerinnen und Entwickler auf die vorgefertigten Optionen zurückgreifen können, wird ihre Arbeit und die Zusammenarbeit im Team damit im Idealfall deutlich vereinfacht. CSS-Frameworks verwenden dafür Codebibliotheken, die dann im HTML-Code verwendet werden.

Tailwind CSS ist ein sehr beliebtes CSS-Framework, das komplett auf den Utility-First-Ansatz setzt und Nutzerinnen und Nutzern Low-Level-CSS-Klassen in PostCSS zur Verfügung stellt, mit denen Komponenten und Designs eigenständig definiert werden können. Tailwind CSS wurde von Adam Wathan entwickelt und 2017 erstmals veröffentlicht. Mittlerweile wurde Tailwind CSS bereits millionenfach installiert.

Der große Vorteil von Utility-First-Frameworks wie Tailwind CSS ist ihre Flexibilität und die daraus resultierenden Möglichkeiten zur Individualisierung. Anders als herkömmliche Cascading Style Sheets (CSS) stellen Utility-First-Frameworks keine vorgefertigten Komponenten zur Verfügung, sondern bieten lediglich Utility-Klassen. Diese enthalten vordefinierte Stile, die dann auf ein Element angewendet werden können. Das erleichtert die Arbeit, führt zu einem übersichtlichen Code und bietet viele zusätzliche Gestaltungsmöglichkeiten, die zu individuelleren Websites beitragen.

Tailwind CSS eignet sich vor allem für Nutzerinnen und Nutzer, die bereits Vorkenntnisse in CSS haben und sich mit den Besonderheiten auskennen. Auch ein Grundverständnis von HTML ist für die Arbeit mit dem Utility-First-Framework wichtig, da Komponenten selbstständig erstellt werden müssen und sämtliche Styles direkt in den HTML-Dateien hinterlegt werden. Außer einigen Grundlagen wie Rändern, Größen und Farben verzichtet Tailwind CSS auf Vorgaben. Mit der nötigen Erfahrung ermöglicht Tailwind CSS-Entwicklerinnen und -Entwicklern eine freie Gestaltung der Elemente ihrer Website und führt dabei sogar zu einer großen Zeitersparnis.

Das CSS eignet sich für Frontend-Webprojekte jeder Art und kann mit vielen gängigen JavaScript-Frameworks eingesetzt werden. So lassen sich z. B. Lavarel, Vue.js und React mit Tailwind CSS nutzen. Mit dieser Kombination können Sie auf den objektorientierten Ansatz vieler anderer Frameworks verzichten.

Mit seinem speziellen Ansatz richtet sich Tailwind CSS also nicht an alle Nutzerinnen und Nutzer. Wenn Sie überlegen, ob der Utility-First-Ansatz für Sie der passende ist, hilft ein Blick auf die Vor- und Nachteile, die Tailwind CSS mitbringt.

• Der Wechsel zwischen HTML-Files und CSS-Files entfällt. Die Arbeit läuft so in der Regel flüssiger.
• Die Arbeit mit Tailwind CSS ermöglicht individuellere Lösungen für wichtige Elemente auf einer Website. Diese sticht dadurch aus der Masse hervor.
• Durch die vordefinierten Klassen und die Verwendung von CSS Media Queries überzeugt Tailwind CSS als responsives Framework und funktioniert auch auf mobilen Devices hervorragend.
• Der Entwicklungsprozess ist insgesamt schneller und wird durch Utility-Klassen erleichtert.
• Die vordefinierten Klassen helfen dabei, das CSS zu komprimieren.
• Mit Tailwind CSS können Modal-Komponenten einfach implementiert werden.
• Das Framework ist sehr stabil und leidet auch im Vergleich unter wenigen Bugs und Problemen.
• Wenn Sie sich bereits mit CSS auskennen, wird Sie der logische Aufbau und Ansatz des Utility-First-Frameworks schnell überzeugen und die Lernkurve relativ flach sein.
• Wenn Sie gerade CSS lernen und gleichzeitig auf Tailwind CSS zurückgreifen möchten, hilft Ihnen eine umfangreiche und leicht verständliche Dokumentation.

• Dennoch sind die ersten Schritte mit dem Framework vergleichsweise schwierig, wenn Sie noch keine Erfahrungen mit den Besonderheiten und Tücken von CSS haben.
• Der Code kann schnell unübersichtlich werden, da viele Informationen in der HTML-Datei hinterlegt werden. Durch die Vermischung von Design und HTML wird außerdem gegen das Prinzip der „Separations of concerns“ (Trennung der Verantwortlichkeiten) verstoßen.
• Bei der Installation von Tailwind CSS werden alle standardmäßigen CSS-Stile gelöscht. Sie müssen daher sämtliche Elemente zunächst neu anlegen. Das gilt auch für wichtige Komponenten wie Buttons, Header oder Navigationsleisten.
• Bestimmte HTML-Elemente wiederholen sich im Markup, sodass der Code gegen den Grundsatz „Don’t repeat yourself!“ verstößt. Dies passiert beispielsweise, wenn ein bestimmtes Element mehrere Male auf der Website verwendet werden soll.

Wie andere Frameworks auch hat Tailwind CSS das Ziel, die Arbeit bei der Erstellung einer Website möglichst zu erleichtern. Durch vordefinierte Klassen und bekannte CSS-Regeln können Homepages schneller und routinierter erstellt werden. Da das Prinzip immer dasselbe ist, gelingt erfahrenen Nutzern und Nutzerinnen der Wechsel zwischen zwei Frameworks relativ schnell. Während herkömmliche Lösungen allerdings zahlreiche feste Komponenten wie Buttons oder Navigationsleisten vorgeben, ermöglicht bzw. erfordert Tailwind CSS die individuelle Erstellung. Anders als manche anderen Frameworks richtet sich Tailwind CSS daher ausdrücklich an Profis mit umfangreichen Vorkenntnissen im Umgang mit CSS.

Am einfachsten fügen Sie Tailwind CSS mit einem Paketmanager hinzu. Node.js sollte außerdem auf Ihrem Rechner installiert sein. Die ersten Schritte sehen dann folgendermaßen aus:

Legen Sie zunächst ein neues Projekt im Terminal an.

Dadurch wird eine package.json-Datei im Grundverzeichnis erstellt. Die Erweiterung „-y“ dient dazu, Standardwerte zu setzen.

Um die neueste stabile Version von Tailwind CSS als Abhängigkeit zu installieren, nutzen Sie folgenden Befehl:

Die Installation kann einige Minuten dauern.

Um nun die Datei tailwind.config.js zu generieren, geben Sie diesen Befehl ein:

Der Inhalt dieser Datei sieht so aus:

Gehen Sie nun in den src-Ordner und fügen Sie folgende Zeilen zu Ihrer CSS-Datei hinzu:

Zum Schluss geben Sie folgenden Befehl im Terminal ein, um den Build-Prozess zu starten:

Es ist keine Überraschung, dass sich Tailwind CSS so großer Beliebtheit erfreut. Für erfahrene Entwicklerinnen und Entwickler, die bereits alle CSS-Tricks kennen, ist das Framework eine gute Möglichkeit, um schneller und ungebundener zu arbeiten. Anfänger und Anfängerinnen sollten allerdings besser auf eine andere Option zurückgreifen, da das Utility-First-Framework ein großes Fehlerpotenzial hat und nicht so einfach zu erlernen ist.