Tailwind CSS bei WordPress einsetzen

Platzhirsche unter sich: Tailwind hat sich inzwischen klar zum beliebtesten CSS-Framework gemausert – wie beispielsweise die Umfrage von State of CSS eindrücklich belegt. In der Welt der Content Management Systeme ist wiederum WordPress eindeutig das beliebteste. Wäre es da nicht eine gute Idee, beide zusammen einzusetzen? Also z.B. Tailwind bei der Erstellung eines WordPress-Themes zu verwenden?

Dieser Artikel zeigt verschiedene Wege dafür – von der händischen Einbindung in ein Theme über die Nutzung von Starter-Themes bis hin zu einem Plugin, das die Tailwind-Klassen im WordPress-Editor verfügbar macht.

Bevor wir damit starten, schauen wir uns erst kurz an, was Tailwind eigentlich ist und welche Arten von WordPress-Themes es gibt.

Tailwind – Utility-First

Im Gegensatz etwa zu Bootstrap ist das CSS-Framework Tailwind ein sogenanntes Utility-First-Framework: Es verwendet keine semantischen Klassen, die komplette Elemente gestalten. Stattdessen arbeitet Tailwind mit vielen kleinen Hilfsklassen (Utilities), von denen jede bestimmte Formatierungen auslöst – z.B. Abstände, Farben, Schriftgrößen oder Layout-Eigenschaften.

So wird beispielsweise eine Meldungsbox nicht über eine semantische Klasse wie alert erstellt, sondern über mehrere Hilfsklassen:

<div class="bg-green-100 hover:bg-green-200 border border-green-400 text-green-700 px-4 py-3 rounded">Aktion war erfolgreich!</div>

Wichtig sind dabei auch die Varianten, die möglich sind, d.h. dass man andere Formatierungen für bestimmte Viewportgrößen oder für Hover-Zustände etc. definieren kann. Im Beispiel ist die Hintergrundfarbe auf ein helles Grün (bg-green-100) gesetzt, beim Hovern wird ein etwas dunkleres Grün gewählt (hover:bg-green-200).

Theoretisch bedeutet das natürlich eine sehr große Anzahl an Klassen, da es zu allen Formatierungen Varianten gibt. Das wäre nicht händelbar. Deswegen verwendet man Tailwind in einem Build-Prozess: Tailwind scannt die Projektdateien, stellt fest, welche Klassen benutzt werden und generiert dann darauf basierend eine auf das Projekt angepasste CSS-Datei. Das ist wichtig im Zusammenhang mit WordPress: Denn deswegen genügt es nicht, einfach im Theme auf die Tailwind-CSS-Datei zu verweisen.

Ein wichtiger Hinweis: Tailwind ist Anfang 2025 in Version 4 erschienen, kurz darauf wurde Version 4.1 veröffentlicht. Alle im Folgenden gezeigten Lösungen unterstützen Tailwind 4. Falls Sie tiefer einsteigen wollen: Achten Sie bei Blogartikeln und Tutorials, oder auch wenn Sie eine KI befragen, dass wirklich Tailwind Version 4 beschrieben wird.

Weitere Informationen zu Tailwind finden Sie in meiner Einführung hier auf dem Host Europe-Blog.

Kommen wir jetzt zu WordPress. Da sich dieser Artikel mit Tailwind und WordPress befasst, ist es wichtig zu verstehen, welche Arten von Themes es in WordPress gibt – denn wenn man Tailwind in WordPress einsetzen möchte, hängt die konkrete Umsetzung stark davon ab, welchen Theme-Typ man verwendet.

Theme-Arten in WordPress

In WordPress steuern Themes, wie eine Website aussieht und welche grundlegenden Funktionen sie hat. Man unterscheidet drei verschiedene Typen von WordPress-Themes: klassische, hybride und Blog-Themes.

Klassische Themes setzen auf die traditionelle WordPress-Theme-Architektur. Der Site-Editor wird nicht benutzt, stattdessen arbeitet man in der Customizer-Oberfläche, die nur die Anpassung bestimmter Bereiche erlaubt. Blöcke können nur innerhalb des Inhaltsbereichs verwendet werden. Ein klassisches Theme erkennt man daran, dass die Templates in PHP geschrieben sind.
Block-Themes nutzen hingegen den neueren Site-Editor und basieren auf HTML-Templates sowie einer theme.json-Datei zur Konfiguration. Entscheidend ist das Full Site Editing, d.h. es kann alles im Backend bearbeitet werden – inklusive des Kopf- oder Fußbereichs.
Hybride Themes kombinieren Elemente aus klassischen und Block-Themes. Es gibt PHP-Templates, aber auch eine Steuerung über die theme.json-Datei, blockbasierte Templates oder Styles.

Tailwind innerhalb von WordPress installieren

Wie kann man nun bei der Erstellung eines WordPress-Themes auf die nützlichen Tailwind-Klassen zurückgreifen? Das sehen wir uns jetzt anhand eines minimalen WordPress-Themes an, in dem die Tailwind-Klassen eingesetzt werden. Wir erstellen dabei ein klassisches/hybrides Theme.

Erst einmal brauchen wir dafür eine WordPress-Installation, für eine lokale Arbeitsumgebung bietet sich z.B. https://localwp.com/, XAMPP mit WordPress oder ein Docker-Setup an. Dann müssen die für das Theme notwendigen Dateien innerhalb von wp-content/themes in einem Unterordner erstellt werden. Für unser Beispiel nenne ich ihn my-tailwind-theme.

In wp-content/themes/my-tailwind-theme werden vier Dateien erstellt:

functions.php: Hier integrieren wir den Code zum Laden der Stylesheets.
index.php sorgt für die HTML-Ausgabe.
style.css ist die zentrale CSS-Datei eines WordPress-Themes mit wichtigen Meta-Informationen, die WordPress zur Erkennung des Themes benötigt.
input.css: In dieser Datei binden wir Tailwind ein und führen unsere Anpassungen an Tailwind durch.

Zuerst schreiben wir den Inhalt für style.css. Er kann beispielsweise wie folgt aussehen:

/* Theme Name: Tailwind Theme Author: Florence Version: 1.0 Description: Tailwind-4-Theme mit CLI */
Diese Meta-Informationen benötigt WordPress, es könnten natürlich weitere Infos ergänzt werden.

index.php enthält das HTML-Grundgerüst und führt wichtige WordPress-Aktionen durch. Außerdem werden mehrere Tailwind-Klassen benutzt, damit sich testen lässt, ob die Klassen wirklich angewendet werden.

In functions.php laden wir zwei CSS-Dateien, zum einen die bereits erstellte style.css-Datei und zum anderen output.css. Letztere wird nicht manuell geschrieben, sondern automatisch von Tailwind generiert.

<?php add_action('wp_enqueue_scripts', function () { wp_enqueue_style('theme-style', get_stylesheet_uri()); // Nur für den WP-Header wp_enqueue_style('tailwind-style', get_template_directory_uri() . '/output.css'); });

Damit ist WordPress soweit vorbereitet. Jetzt muss Tailwind installiert werden.

Wir initialisieren ein Node-Projekt im Ordner my-tailwind-theme, wodurch eine package.json mit den Standardangaben erzeugt wird. Dazu öffnen wir die Konsole bzw. das Terminal, wechseln in den Theme-Ordner und führen folgenden Befehl aus:

npm init -y

Damit das klappt, muss Node.js installiert sein.

Als Nächstes installieren wir Tailwind als Developer-Dependency. Wir wählen hier die CLI-Version:

npm install -D tailwindcss @tailwindcss/cli

Nun benötigen wir noch die Datei, um Tailwind einzubinden, sie heißt input.css und hat folgenden Inhalt:

@import "tailwindcss";

Schließlich brauchen wir noch die build-Skripte, die wir innerhalb des scripts-Bereich in package.json einfügen. Zum einen definieren wir einen build-Befehl für die endgültige Erstellung der CSS-Datei, bei dem gleichzeitig die Dateien minimiert werden. Zum anderen definieren wir für die Arbeit einen watch-Befehl, mit dem Tailwind automatisch bei Änderungen die Datei output.css neu erzeugt.

"scripts": { "build": "npx @tailwindcss/cli -i ./input.css -o ./output.css --minify", "watch": "npx @tailwindcss/cli -i ./input.css -o ./output.css --watch" }

Den Build-Vorgang starten wir auf der Konsole/dem Terminal mit:
npm run build

Danach können wir das Theme im Backend von WordPress aktivieren… und wenn die Schrift groß, blau und mittig angeordnet ist, zeigt sich, dass die benutzten Tailwind-Klassen angewandt werden.

Die Integration von Tailwind in das WordPress-Theme hat geklappt.

Wir haben die Tailwind-Datei mit npm run build erzeugt. Sinnvoll ist es, bei der Arbeit an dem Theme den watch-Modus zu verwenden:

npm run watch

Dann wird die CSS-Datei laufend erstellt, wenn es Änderungen an den verwendeten Klassen in den Templates gibt.

Derzeit nutzen wir CSS-Dateien: style.css für die notwendigen Meta-Informationen für WordPress und input.css für den Tailwind-Code. Natürlich könnte man auch stattdessen nur eine CSS-Datei verwenden. Das Problem ist nur, dass beim Minimieren der CSS-Datei üblicherweise auch die Kommentare entfernt werden. Wenn man also den Tailwind-Code in style.css unterbringen möchte, müsste man den Style-Header mit dem wichtigen Kommentar auslagern und beim Build-Vorgang an den Anfang der style.css-Datei kopieren.

Tailwind anpassen

Um Tailwind anzupassen, können Sie wie auch sonst in dem Framework einen @theme-Bereich in der Tailwind-Datei (bei uns input.css) definieren. Auf die folgende Art legen Sie beispielsweise eine eigene Schriftliste und mehrere Farben fest.

Damit können wir die neu definierten Klassen nutzen. z.B. können wir Farben und Schriften bei einem Button angeben, den wir in unserer index.php ergänzen.

<div class="bg-avocado-200 hover:bg-avocado-300 border-avocado-100 p-4 text-avocado-600 font-[--font-display]">Avocado Button </div>

Hier werden mehrfach die neu definierten Farben verwendet – als Hintergrund (bg-avocado-200), als etwas dunklere Farbe beim Hovern (hover:bg-avocado-300), als Rahmen (border-avocado-100) und für die Textfarbe (text-avocado-600). Wenn Tailwind im watch-Modus läuft oder neu kompiliert wird, sieht man, dass die Klassen korrekt angewendet werden.

Manchmal ist es allerdings nicht möglich, den HTML-Code selbst zu definieren, weil er beispielsweise automatisch generiert wird. In diesen Fällen ist die @apply-Direktive aus Tailwind nützlich. Ein Beispiel: Wenn ein eingeloggter Benutzer bei WordPress die Seite besucht, ergänzt WordPress beim body-Element die Klasse logged-in. Wenn Sie diese nun mithilfe der Tailwind-Klassen formatieren wollen, können Sie in Ihrer Tailwind-Datei das Folgende ergänzen:

body.logged-in { @apply border-8 border-indigo-600; }

Die Angabe @apply ist eine Tailwind-spezifische Direktive und ermöglicht es, Utility-Klassen in Styleregeln zu nutzen.

Dynamische Inhalte stylen

Derzeit zeigt die index.php-Seite einen statischen Text, hier sollen aber natürlich die Inhalte ausgegeben werden. Dafür ergänzen wir in index.php unterhalb der Überschrift den folgenden Code:

Solange Inhalte da sind, wird der Titel innerhalb einer h2-Überschrift mit Tailwind-Klassen ausgegeben, darunter folgt in einem div-Element der restliche Inhalt.

Damit zeigt sich eine weitere Herausforderung. Wenn man testweise in einem Beitrag Überschriften und Listen eingibt, unterscheiden sich diese optisch nicht.

Überschriften und Listen sind nicht als solche erkennbar.

Das liegt daran, dass Tailwind intern im Base-Layer alle Browserdefaults nivelliert, so werden z.B. alle Überschriften auf eine Standardgröße gesetzt und nicht fett dargestellt. Prinzipiell ist diese Herangehensweise von Tailwind sinnvoll, weil man damit die Utility-Klassen frei für die Gestaltung nutzen kann, ohne vorher über weitere Klassen Browsedefaults überschreiben zu müssen. In unserem Fall allerdings, wo der Code aus einem Editor kommt, ist das unpraktisch.

Eine Lösung bietet das Tailwind Typography-Plugin. Es hilft bei der Gestaltung von Inhalten, die aus einem CMS kommen. Welche Formatierungen damit standardmäßig durchgeführt werden, zeigt das Beispiel beim Tailwind Playground.

Tailwind Typography-Plugin

Um das Typography-Plugin zu verwenden, muss es zuerst installiert werden:

npm install -D @tailwindcss/typography

Dann folgt die Aktivierung. In Tailwind 4 geht das über eine Ergänzung in der Tailwind-CSS-Datei, bei uns also innerhalb von input.css:

/* wie bisher …*/ @import "tailwindcss"; /* neu */ @plugin "@tailwindcss/typography";

Damit dann die Formatierungen wirken, braucht das umfassende Element aus index.php die Klasse prose:

<div class="prose max-w-none"><?php the_content(); ?></div>

Damit sind die Inhalte grundlegend gestaltet.

Überschriften und Listen sind unterschiedlich gestylt.

Auf der GitHub-Seite des Plugins finden Sie weitere Informationen zur Anpassung.

An dieser Stelle ist es sinnvoll, sich einmal prinzipiell zu überlegen, wie man mit dem von WordPress generierten Standard-Markup für Menüs und ähnlichen Elemente am besten umgeht und wie sich da die Tailwind-Formatierungen integrieren lassen.

Eine Möglichkeit besteht darin, mithilfe von @apply Tailwind-Formatierungen auf bestehende Klassen anzuwenden. Einige Funktionen in WordPress erlauben es auch, eigene Klassen direkt zu vergeben und da kann man dann natürlich Tailwind-Klassen nutzen. Alternativ kann man das Markup auch komplett selbst schreiben – damit hat man die maximale Kontrolle, aber auch den größten Aufwand.

theme.json

Sinnvoll ist es, eine theme.json-Datei in unserem Theme zu ergänzen. theme.json ist eine zentrale Konfigurationsdatei in WordPress, die Design- und Funktionseinstellungen für ein Theme definiert. Darüber können Farben, Schriftarten, Abstände, Layoutgrößen und andere Designaspekte konfiguriert werden.

Die folgende minimale theme.json-Datei definiert zwei Farben:

Damit stehen die beiden Farben Primary und Secondary im Editor zur Auswahl, z. B. beim Einfärben von Absätzen oder Buttons.

Allerdings sind dann die Formatierungen im Editor nicht automatisch auf das gewünschte Tailwind-Design abgestimmt. Damit die Inhalte im Editor auch tatsächlich wie im Frontend aussehen, müssen zusätzlich passende Editor-Styles definiert werden – idealerweise unter Verwendung von Tailwind-Klassen. Das funktioniert etwa über eine eigene CSS-Datei (z. B. editor-input.css), in der Tailwind-Utilities per @apply angewendet werden – beispielsweise auf .editor-styles-wrapper, der zentralen Hülle des Block-Editors.

Und es ergibt sich noch eine weitere Herausforderung. Bei unserem Ansatz sind Tailwind und theme.json voneinander unabhängig. Das führt zu Dopplungen, weil z.B. Farben oder Ausmaße an zwei Stellen angegeben werden müssen. Besser wäre es, die beiden zu verknüpfen. Dafür existieren verschiedene Möglichkeiten:

Eine Option wäre, die in theme.json definierten Farben mit Tailwind-Klassen zu verbinden. So funktioniert es beispielsweise im Starter-Theme _tw: Hier wird inzwischen eine Basis-theme.json mitgeliefert, deren Werte als Variablen in die Datei ./tailwind/tailwind-theme überführt werden und damit in Tailwind genutzt werden können.
Umgekehrt könnte es auch sinnvoll sein, wenn die theme.json durch Tailwind-Konfiguration erstellt wird. Diesen Weg geht das WordPress-Framework Sage.

Und natürlich ist unser Theme nur zu Demonstrationszwecken geeignet. Es zeigt, dass die Klassen von Tailwind funktionieren und Inhalte gestylt werden. Bei einem echten Projekt müsste man noch wesentlich mehr machen. Nur selten wird man allerdings ein WordPress-Theme vollständig von Grund auf neu entwickeln. In den meisten Fällen ist es deutlich effizienter, auf ein Basis-Theme zurückzugreifen – idealerweise eines, das bereits Tailwind integriert hat.

Dafür stehen mehrere Optionen zur Verfügung. Zwei solche Basis-Themes möchte ich hier kurz vorstellen: _tw und TailPress. Beide setzen bereits auf Tailwind in Version 4 und bieten eine gute Ausgangsbasis für eigene Projekte. Eine weitere interessante Möglichkeit ist das Framework Sage von Roots.io. Es ist eine attraktive Option, wenn Sie mit Laravel Blade Templates arbeiten möchten.

_tw

Das Theme _tw basiert auf dem Starter-Theme _s und erweitert dieses um eine integrierte Tailwind-Konfiguration. Um ein eigenes Theme mit _tw zu erstellen, rufen Sie die Projektwebsite unter https://underscoretw.com/ auf. Dort geben Sie grundlegende Informationen wie Theme-Name, Autor oder Beschreibung an – diese werden automatisch in die style.css des Themes übernommen und darauf basierend wird Ihnen Ihr Theme erzeugt.

Nach dem Herunterladen entpacken Sie das ZIP-Archiv und verschieben den generierten Theme-Ordner in das Verzeichnis wp-content/themes/ der WordPress-Installation. Navigieren Sie anschließend im Terminal in den Theme-Ordner und führen Sie folgende Befehle aus:

npm install npm run dev

Dies installiert alle Abhängigkeiten und startet die Entwicklungsumgebung. Falls Sie zusätzliche Tools für Linting, Code-Formatierung oder Internationalisierung nutzen möchten, führen Sie außerdem diesen Befehl aus:

composer install

Während der Entwicklung können Sie mit dem Befehl npm run watch das Stylesheet automatisch bei Dateiänderungen neu generieren lassen. Für die Produktion verwenden Sie:

npm run prodA

Die Konfiguration von Tailwind erfolgt über die Datei ./tailwind.css sowie weitere Einstellungen im Ordner ./tailwind. Besonders wichtig: _tw bringt bereits eine grundlegende theme.json-Datei mit, in der z. B. Farben, Schriftgrößen oder Layoutbreiten definiert sind. Diese Werte werden über CSS-Variablen automatisch in ./tailwind/tailwind-theme.css verfügbar gemacht. Auch ein eigenes Stylesheet für den Editor ist enthalten und auch das Tailwind Typography-Plugin ist bereits installiert.

Sample Page in _tw nach der Installation

TailPress

TailPress benötigt neben einer WordPress-Installation und Node auch den PHP-Paketmanager Composer. Dann können Sie auf dem Terminal/der Konsole eingeben:

composer global require tailpress/installer

Um zu kontrollieren, ob es geklappt hat, schreiben Sie…

tailpress --version

Nun können Sie Ihr Theme erstellen. Wechseln Sie in wp_content/themes und geben Sie ein:

tailpress new my-tailpress-theme

Im Beispiel heißt der Theme-Ordner my-tailpress-theme. Sie werden dann durch die Installation geführt und können die benötigten Meta-Angaben für das Theme machen und angeben, unter welcher URL die Installation von WordPress aufgerufen werden kann – bei Bedarf ließe sich sogar WordPress installieren. Nach der Installation wechseln Sie in das Verzeichnis des gerade installierten Themes und schreiben:

npm install npm run dev

Danach kann das Theme aktiviert werden. TailPress verwendet übrigens Tailwind über Vite.

TailPress direkt nach der Installation

Für Live-Seiten oder richtige Tests muss man dann angeben:

npm run build

Auch hier werden die Inhalte automatisch gestylt und es gibt Styles für den Editor. Für das Stylen der Inhalte ist allerdings nicht das Typography-Plugin aus Tailwind zuständig, sondern es erfolgt über Klassendefinitionen in custom.css.

WindPress

Bisher haben wir betrachtet, wie man Tailwind-Klassen innerhalb eines WordPress-Themes nutzt – insbesondere in hybriden Themes, nicht aber in reinen Block-Themes. Möchte man jedoch Tailwind-Klassen direkt im Block-Editor einsetzen, stellt sich eine zentrale Herausforderung: Der Tailwind-Build-Prozess muss auch auf dem Live-System ausgeführt werden – und zwar immer dann, wenn Inhalte im Editor geändert werden. Eine elegante Lösung dafür bietet das Plugin WindPress.

WindPress ermöglicht es, Tailwind CSS direkt im Block-Editor zu verwenden. Die kostenlose Version unterstützt den Gutenberg-Editor. Für andere Page Builder wie Bricks ist ein kostenpflichtiges Upgrade erforderlich, die Liste der unterstützten Page Builder wird laufend erweitert.

Nach der Installation und Aktivierung des Plugins erscheint bei Beiträgen und Seiten in der rechten Seitenleiste ein zusätzlicher Bereich namens WindPress. Dort finden Sie ein Eingabefeld, in das Sie Tailwind-Klassen direkt für den jeweiligen Block eintragen können.

Klassen zu Blöcken ergänzen

WindPress bietet eine Autovervollständigung: Sobald Sie beginnen, eine Klasse einzugeben, schlägt das Plugin passende Klassen vor. Bei Farbklassen wird zusätzlich die entsprechende Farbe angezeigt. Wenn Sie mit der Maus über eine Klasse fahren, zeigt WindPress den zugehörigen CSS-Code an. Außerdem können die Klassen sortiert werden.

Im WordPress-Menü erscheint ein neuer Punkt WindPress, über den sich das Plugin konfigurieren lässt. Die wichtigsten Bereiche sind Files und Einstellungen:

Files: Hier legen Sie die Basis-CSS-Struktur fest – also das, was üblicherweise in einer input.css stünde, d.h. darüber können Sie Tailwind konfigurieren.
Einstellungen/General: Hier wählen Sie die Tailwind-Version. Neben der aktuellen Version 4.x steht auch noch Tailwind 3.4 zur Auswahl. Das kann für ältere Browser sinnvoll sein.
Einstellungen/Performance: Bei den Optionen zur Optimierung können Sie bestimmen, ob die CSS-Dateien gecacht werden sollen, sie können die gecachte Version neu generieren und diese bei Bedarf herunterladen.

Performance-Einstellungen bei WindPress

Fazit – Tailwind bei WordPress einsetzen

Es ist relativ einfach und schnell erledigt, Tailwind in WordPress grundlegend zu integrieren. Aber dann beginnt die eigentliche Arbeit: Wie soll die Zusammenarbeit am besten geregelt werden, damit das Ganze übersichtlich bleibt und man den Code nicht doppelt schreibt?

Dann ist es sinnvoll, doch ein Starter-Theme wie _tw oder TailPress zu verwenden, die viele dieser Aufgaben bereits erledigt haben… oder man kann sich zumindest an den dort gewählten Lösungsansätzen orientieren. Und wer nach einer Möglichkeit sucht, die Tailwind-Klassen bei Gutenberg-Blöcken zu integrieren, sollte sich WindPress unbedingt mal ansehen.

Unabhängig davon, für welchen Weg man sich entscheidet, ist eines klar: Auf die Vorteile von Tailwind CSS muss man auch in WordPress-Projekten nicht verzichten.

Über
Letzte Artikel

Florence Maurice

Florence Maurice ist Autorin und Trainerin für Webthemen mit Schwerpunkt CSS. Sie schreibt Bücher zu Webtechniken wie das Einstiegsbuch “HTML und CSS für Dummies”. Außerdem gibt sie Trainings per Video oder live. Mitunter bloggt sie zu Webthemen unter https://maurice-web.de/blog/.

Letzte Artikel von Florence Maurice (Alle anzeigen)