Kategorien
CSS

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.

Eine Antwort auf „Tailwind CSS und WordPress – geht das?“

Ich nutze Tailwind bereits seit (glaube ich) Version 0.4 und bin eigentlich sehr zufrieden. Vorteil für mich ist, dass ich mir keine Klassennamen ausdenken muss, das Design nicht wie bei Bootstrap vorgegeben ist und ich zumindest das Gefühl habe mein Design ist konsistenter. Alleine dadurch, dass man einheitlich vordefinierte Farben (kann man für sich ja anpassen) hat und auch Margins/Paddings abgestuft sind.

Ich nutze es auch für zwei meiner WordPress Themes (die ich allerdings nur selber nutze). Viele WordPress-Klassen style ich über @apply. Nach Möglichkeit nutze ich aber die Tailwind-Klassen direkt im HTML. Würde ich aber auch nicht, unbedingt für ein Theme in der WordPress Repository empfehlen. Man ändert doch sehr viel direkt im HTML-Markup was mit Child Themes zu Problemen führt.

Bzgl. der WordPress Klassen und PurgeCSS muss man aufpassen. Am praktikabelsten hat sich für mir erwiesen einen extra Ordner purge-templates Anzulegen mit HTML-Templates für Widgets, Menus, … die ich mit @apply gestyled habe.

Also ich bin ein großer Fan von Tailwind. Alleine durch die Dokumentation lernt man so viel über CSS und es macht einfach viel mehr Spaß schnelle Resultate zu sehen, als sich ständig neue Klassen auszudenken.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.