Tailwind CSS Vor- und Nachteile

Tailwind CSS (https://tailwindcss.com/) hat einen Hype ausgelöst und auch kontroverse Diskussionen unter Gegnern hervorgerufen. Wie so oft in der Entwicklerwelt wird in beide Richtungen übertrieben. In diesem Artikel teile ich meine Erfahrungen als jemand, der seit über 20 Jahren mit CSS arbeitet.

Man lernt Tailwind CSS erst richtig kennen und schätzen, wenn man tatsächlich damit gearbeitet hat. Das war auch bei mir der Fall.

Angefangen habe ich Ende der 90er Jahre mit Tabellenlayouts. Dann wurden viele Jahre lang CSS-Frameworks wie Bootstrap oder Foundation und Tools wie SASS oder Gulp verwendet. Mit JavaScript-Tools wie Angular oder React versuchte man vermehrt wiederverwendbare Komponenten zu erstellen. Eine Herausforderung war es, das CSS für eine in sich geschlossene Komponente, wie einen Button oder Hero, zu liefern, ohne versehentlich Klassen von anderen Komponenten zu überschreiben. Daraus entstand die Methode BEM (https://getbem.com/introduction/) (Block Element Modifier), bei der CSS-Klassen beispielsweise so aussahen: button--state-success. Mir gefiel daran nicht, dass man vielen Kleinigkeiten separate Klassen zuordnen musste und die Kaskade im CSS praktisch ausgeschaltet wurde. Außerdem führte dies zu doppelten Deklarationen und einer aufgeblähten CSS-Datei. Durch meine Arbeit mit React habe ich Styled Components (https://styled-components.com/) kennengelernt. Hier erfolgt das Styling direkt in der Komponente und man kann Props einfach für das Styling verwenden. Dadurch entstehen eigenständige, wiederverwendbare Komponenten, ohne die Gefahr, dass das CSS anderer Komponenten beeinflusst wird. Allerdings fand ich das Debugging schwierig und Styled Components können möglicherweise Performance-Probleme verursachen.

Als der Hype um Tailwind CSS um das Jahr 2020 begann, habe ich es kurz ausprobiert, konnte mich jedoch erstmal nicht damit anfreunden. Ich habe damals viel mit Sass gearbeitet und sah zunächst keine Vorteile in Tailwind. Im Gegenteil, ich fand es umständlich, jedes Element einzeln zu stylen.

Allerdings konnte man Tailwind als Entwickler kaum ignorieren, da es praktisch in jedem Tutorial für React oder Next.js verwendet wurde. Für Lernvideos, Beispiele oder Tutorials hat es den großen Vorteil, dass man mit dem Kopieren und Einfügen des HTML-Codes auch das CSS erhält.

Als Tailwind den Just-in-Time-Compiler (JIT) bekam, begann ich, erste kleinere Projekte und Prototypen damit umzusetzen. Moderne Entwicklungsumgebungen zeigen die Änderungen im Browser sofort an, sodass man sehr schnell seine Elemente stylen kann, ohne die HTML-Ansicht verlassen zu müssen.

Einige UI-Libraries wie Tailwind UI (https://tailwindui.com/) oder Shadcn UI (https://ui.shadcn.com/) nutzen den Vorteil von Tailwind, indem man den Code für eine fertig gestylte Komponente einfach durch Kopieren und Einfügen von der Vorlagenseite in das eigene Projekt einfügen kann. Tailwind UI berücksichtigt dabei die Regeln des Buches "Refactoring UI" (https://www.refactoringui.com/), das von den Tailwind-Entwicklern, noch vor der Entstehung von Tailwind CSS, geschrieben wurde.

Nachdem ich Tailwind CSS nun in mehreren Projekten eingesetzt habe, sehe ich folgende Vor- und Nachteile:

Vorteile von Tailwind CSS:

• Keine Missverständnisse über Klassennamen oder versehentliches Überschreiben von Attributen. Jeder Tailwind-Anwender kann anhand der Klassennamen sofort erkennen, welche Styles angewendet wurden. Wenn man ein Projekt nach Monaten wieder anschaut, weiß man bei den Styles sofort Bescheid, ohne in der CSS-Datei suchen zu müssen. Neue Teammitglieder haben es einfacher, da alle die gleichen Klassennamen verwenden.
• Man muss sich keine Klassennamen ausdenken und diese im Laufe des Projekts umbenennen, wenn sie spezifischer geworden sind.
• Als erfahrener CSS-Entwickler lernt man Tailwind CSS recht schnell. Die vorgegebenen Farben und Style-Schritte (Abstände, Margins, Schriftgrößen) sind sinnvoll und meist ausreichend. In der tailwind.config lassen sich viele Dinge wie Breakpoints oder eigene Farben anpassen und sind dann als Klassen für jedes Element verfügbar, inklusive Autovervollständigung in der IDE.
• Durch den Compiler landen nur die wirklich im Code verwendeten Klassen in der CSS-Datei. Diese bleibt relativ klein (meistens unter 15 KB, komprimiert). Das ist ein großer Vorteil gegenüber Bootstrap. Anpassungen von Komponenten an die eigenen Bedürfnisse sind in Bootstrap schwieriger. Am Ende erhält man normales, reines CSS. Also keine Zauberei.
• Sehr schnelles Prototyping. Tailwind bietet viele vorgefertigte Styles für Schatten, Border oder Animationen. Durch UI-Libraries wie Tailwind UI kann man praktisch ohne umfangreiche CSS-Kenntnisse optisch ansprechende Prototypen erstellen. Die Komponenten von Tailwind UI richten sich nach den professionellen Regeln des Buches Refactoring UI.
• Es gibt Plugins für Tailwind CSS, die das Arbeiten mit Formularen, Typografie oder Container Queries weiter erleichtern.

Nachteile von Tailwind CSS:

• Am schlimmsten finde ich den hässlichen, teilweise aufgeblähten HTML-Code, der entsteht, z.B.:

<button
  class="inline-block disabled:bg-grey-50 text-lg bg-grey-100 appearance-none border-2 border-grey-100 hover:text-green-100 hover:bg-green-50 hover:border-grey-200 px-6 py-2 rounded-lg dark:hover:text-white dark:bg-grey-700 dark:border-grey-900 dark:hover:border-grey-600 dark:hover:bg-grey-400">ButtonName
</button>

• Ich finde, dass Tailwind CSS nur optimal in der modulorientierten Programmierung ist, wo möglichst jedes Element, welches mehrfach verwendet wird, als Modul ausgelagert wird.
• Die Einrichtung der Entwicklungsumgebung für Tailwind CSS erfordert einen gewissen Aufwand, um den JIT-Compiler usw. nutzen zu können. Viele JS-Frameworks wie Next.js (https://nextjs.org/) oder Remix.run (https://remix.run/) haben inzwischen Tailwind CSS standardmäßig integriert. In einem PHP oder WordPress Projekt habe ich Tailwind noch nicht eingesetzt und kann nicht sagen, ob es dort sinnvoll ist.
• Es besteht eine gewisse Abhängigkeit von einem externen Projekt. Man weiß nie, wie lange dieses bestehen bleibt und wann der nächste Hype kommt.

Man kann natürlich eigene Klassen erstellen, z.B. .btn, und darin auch die Tailwind-Klassen mit @apply nutzen. Auch CSS-Variablen können in den Tailwind-Klassen verwendet werden. Die Erfinder von Tailwind CSS meinen, dass man nur sehr selten eigene Klassen benötigt und dies möglichst vermeiden sollte, da man damit die ursprünglichen Probleme wieder einführt, die man eigentlich durch Tailwind vermeiden wollte. Ich bin manchmal nicht ganz ohne ein paar eigene Klassen für Überschriften oder Buttons ausgekommen. Andernfalls müsste man Änderungen an sich wiederholenden Elementen (Don’t Repeat Yourself) per Suchen und Ersetzen vornehmen oder diese Elemente strikt als eigene Module auslagern, was mir manchmal bei einfachen Überschriften oder Tabellenzeilen schwerfällt.

Insgesamt betrachte ich Tailwind CSS positiv und als eine einfache Methode, mit CSS umzugehen. Für erfahrene CSS-Entwickler mag es immer noch besser erscheinen, eigene ausgefeilte Klassen zu erstellen und die CSS Kaskade zu nutzen. Für Neueinsteiger und insbesondere für schnelle Projekte und Prototyping hat Tailwind CSS jedoch viele Vorteile. In Verbindung mit Tailwind UI lassen sich in kürzester Zeit voll funktionsfähige Prototypen erstellen.