Tailwind CSS und WordPress – geht das?

Wenn es in Sachen CSS etwas gibt, was in 2020 (und eigentlich auch schon früher) der heiße Scheiß ist (und war), dann definitiv Tailwind CSS. Es ist ein sogenanntes Utility-First Framework und wirbt mit folgendem Claim auf der Website:

Rapidly build modern websites without ever leaving your HTML.

Tailwind CSS Website

Und mit „without ever leaving your HTML“ ist genau das gemeint, was da steht. Das erste Beispiel auf der Website von Tailwind CSS zeigt dies eindrucksvoll: ein riesiger Haufen CSS-Klassen wird an jedes HTML-Element geklatscht, das gestylt werden soll. Wenn sich bei dir auch die Nackenhaare bei diesem Gedanken sträuben, mir geht es da ganz genauso.

Was ist Tailwind CSS?

Aber betrachten wir Tailwind CSS einmal ganz nüchtern. Es ist ein CSS-Framework, ähnlich wie Bootstrap oder Foundation, die es schon recht lange gibt. Tailwind CSS gibt es seit 2016 und im November 2020 erschien die Version 2.0. Es fährt allerdings den Utility-First-Ansatz, d. h. es gibt sehr viele Klassen, die alle einzelne Dinge erledigen. Kombiniert man diese Klassen, entsteht ein komplett gestyltes Element.

Jetzt könnte man meinen, dass man sich mit dieser Idee von drölftausend Klassen eine riesige CSS-Datei auf die Website holt, die die Performance in den Keller zieht. Dem ist aber tatsächlich nur dann so, wenn man das gesamte Framework eben so einbindet, was nicht empfohlen ist. Stattdessen kann Tailwind CSS als PostCSS Plugin installiert werden. Passenderweise gibt es auch eine Purge-Funktion, mit welcher das Framework auf nur die Klassen reduziert werden kann, die im Projekt verwendet werden.

Wie lässt sich Tailwind CSS mit WordPress nutzen?

Für eigene Komponenten lässt sich Tailwind CSS bestimmt gut einsetzen, wenn man in einem Theme oder Plugin die CSS-Klassen selbst vergeben kann. Etwas schwieriger wird es da bei den Standard-Elementen, dessen Templates von WordPress selbst bereitgestellt werden. Wenn man PostCSS nutzt, kann man sich die @apply-Direktive zu Nutze machen: damit lassen sich die Klassen aus Tailwind CSS direkt im eigenen CSS verwenden, ohne die bisherige Struktur über den Haufen zu schmeißen. Ausprobiert habe ich das noch nicht, aber das könnte ein guter Weg sein, das Framework auch für die Standard-Elemente von WordPress nutzen zu können, ohne irgendwelche PHP-Funktionen zu schreiben, die die Klassen an die Elemente klatschen.

Fazit

Ich habe ja ehrlich gesagt etwas mit den Augen gerollt, als ich das erste Beispiel des Utility-First-Ansatzes von Tailwind CSS gesehen habe. Wieso ist das denn jetzt wieder hipp, das HTML mit Klassen zuzupflastern? Pack doch das dafür benötigte CSS in eine Klasse, ist ja nicht so schwer.

Allerdings sehe ich Vorteile bei zwei Anwendungsfällen: größere Teams, die an einem Produkt arbeiten, programmieren im selben Stil und nicht jeder nach eigenem Gutdünken, da das Framework einen gewissen Rahmen vorgibt. Der zweite Fall ist das Prototyping, denn man auf einer grünen Wiese quasi nur im HTML ein Design zusammenstellen, indem einfach viele Klassen kombiniert werden.

Ich werde Tailwind CSS in 2021 mal eine Chance geben und versuchen, dass in einem Projekt einzusetzen. Gerade mit der @apply-Direktive macht es das ganze dann auch sinnvoll im WordPress-Umfeld nutzbar.