Tailwind CSS zu neuen und bestehenden WordPress-Themes hinzufügen

In den rund 15 Jahren, seitdem ich angefangen habe, WordPress-Websites zu erstellen, hat nichts meine Produktivität – und meine Fähigkeit, Front-End-Entwicklung zu genießen – mehr beeinflusst als die Einbindung von Tailwind CSS in meinen Workflow (und das mit deutlichem Abstand).

Als ich mit Tailwind zu arbeiten begann, gab es ein aktuelles, offizielles Repository auf GitHub, das beschrieb, wie man Tailwind mit WordPress verwendet. Dieses Repository wurde seit 2019 nicht mehr aktualisiert. Aber diese fehlende Aktualisierung ist kein Urteil über die Nützlichkeit von Tailwind für WordPress-Entwickler. Indem man Tailwind das tun lässt, was Tailwind am besten kann, während WordPress immer noch WordPress sein darf, ist es möglich, die besten Teile beider Plattformen zu nutzen und moderne Websites in kürzerer Zeit zu erstellen.

Das minimale Setup-Beispiel in diesem Artikel zielt darauf ab, eine Aktualisierung dieses ursprünglichen Setup-Repositories bereitzustellen, überarbeitet, um mit den neuesten Versionen von sowohl Tailwind als auch WordPress zu funktionieren. Dieser Ansatz kann erweitert werden, um mit allen Arten von WordPress-Themes zu arbeiten, von einem geforkten Standardtheme bis hin zu etwas völlig Eigenem.

Warum WordPress-Entwickler sich für Tailwind interessieren sollten

Bevor wir über die Einrichtung sprechen, lohnt es sich, einen Schritt zurückzutreten und zu diskutieren, wie Tailwind funktioniert und was das im Kontext von WordPress bedeutet.

Tailwind ermöglicht es Ihnen, HTML-Elemente mit vorgefertigten Utility-Klassen zu gestalten, wodurch die Notwendigkeit entfällt, den größten Teil oder die gesamte CSS-Datei Ihrer Website selbst zu schreiben. (Denken Sie an Klassen wie hidden für display: hidden oder uppercase für text-transform: uppercase.) Wenn Sie in der Vergangenheit Frameworks wie Bootstrap und Foundation verwendet haben, wird der größte Unterschied, den Sie bei Tailwind CSS feststellen werden, sein minimalistischer Ansatz für das Design, kombiniert mit der Leichtigkeit, nur CSS zu verwenden, mit nur einem CSS-Reset, der standardmäßig enthalten ist. Diese Eigenschaften ermöglichen stark optimierte Websites, ohne Entwickler zu einer Ästhetik zu drängen, die im Framework selbst eingebaut ist.

Im Gegensatz zu vielen anderen CSS-Frameworks ist es außerdem unwirtschaftlich, eine „Standard“-Build von Tailwind CSS von einem bestehenden CDN zu laden. Mit all seinen Utility-Klassen wäre die generierte CSS-Datei einfach zu groß. Tailwind bietet ein „Play CDN“, aber es ist nicht für den Produktionseinsatz gedacht, da es die Leistungsvorteile von Tailwind erheblich reduziert. (Es ist jedoch sehr nützlich, wenn Sie schnelle Prototypen erstellen oder Tailwind experimentell nutzen möchten, ohne es tatsächlich zu installieren oder einen Build-Prozess einzurichten.)

Diese Notwendigkeit, den Build-Prozess von Tailwind zu nutzen, um eine Untermenge der Utility-Klassen des Frameworks zu erstellen, die für Ihr Projekt spezifisch sind, macht es wichtig zu verstehen, wie Tailwind entscheidet, welche Utility-Klassen enthalten sind, und wie dieser Prozess die Verwendung von Utility-Klassen im Editor von WordPress beeinflusst.

Und schließlich bedeutet Tailwinds aggressives Preflight (seine Version eines CSS-Resets), dass einige Teile von WordPress mit den Standardeinstellungen nicht gut zu dem Framework passen.

Beginnen wir damit, wo Tailwind gut mit WordPress funktioniert.

Wo Tailwind und WordPress gut zusammenarbeiten

Damit Tailwind ohne wesentliche Anpassungen gut funktioniert, muss es als primäres CSS für eine gegebene Seite agieren; dies schließt eine Reihe von Anwendungsfällen innerhalb von WordPress aus.

Wenn Sie ein WordPress-Plugin entwickeln und Front-End-CSS einbinden müssen, würde beispielsweise Tailwinds Preflight direkt mit dem aktiven Theme kollidieren. Ebenso, wenn Sie den Administrationsbereich von WordPress – außerhalb des Editors – gestalten müssen, können die eigenen Stile des Administrationsbereichs überschrieben werden.

Es gibt Lösungen für beide Probleme: Sie können Preflight deaktivieren und allen Ihren Utility-Klassen ein Präfix hinzufügen, oder Sie können PostCSS verwenden, um allen Ihren Selektoren einen Namespace zuzuweisen. In jedem Fall werden Ihre Konfiguration und Ihr Workflow komplizierter.

Aber wenn Sie ein Theme entwickeln, passt Tailwind direkt aus der Box hervorragend. Ich hatte Erfolg beim Erstellen von benutzerdefinierten Themes mit dem klassischen Editor und dem Block-Editor und bin optimistisch, dass mit der Weiterentwicklung von Full-Site-Editing eine Reihe von Full-Site-Editing-Funktionen gut neben Tailwind funktionieren werden.

In ihrem Blogbeitrag „Gutenberg Full Site Editing muss nicht voll sein“ beschreibt Tammie Lister Full-Site-Editing als eine Reihe separater Funktionen, die teilweise oder ganz übernommen werden können. Es ist unwahrscheinlich, dass die Global Styles-Funktionalität von Full-Site-Editing jemals mit Tailwind funktionieren wird, aber viele andere Funktionen wahrscheinlich schon.

Also: Sie entwickeln ein Theme, Tailwind ist installiert und konfiguriert, und Sie fügen mit einem Lächeln auf dem Gesicht Utility-Klassen hinzu. Aber werden diese Utility-Klassen im WordPress-Editor funktionieren?

Mit Planung, ja! Utility-Klassen sind im Editor verfügbar, solange Sie im Voraus entscheiden, welche Sie verwenden möchten. Sie können den Editor nicht öffnen und beliebige Tailwind-Utility-Klassen verwenden; in Tailwinds Fokus auf Leistung ist die Einschränkung eingebettet, nur die Utility-Klassen aufzunehmen, die Ihr Theme verwendet. Sie müssen Tailwind also im Voraus mitteilen, welche im Editor benötigt werden, obwohl sie anderswo in Ihrem Code fehlen.

Dafür gibt es verschiedene Möglichkeiten: Sie können eine Safelist in Ihrer Tailwind-Konfigurationsdatei erstellen; Sie können Kommentare mit Listen von Klassen neben dem Code für benutzerdefinierte Blöcke einfügen, die Sie im Block-Editor gestalten möchten; Sie könnten sogar eine Datei erstellen, die alle Ihre Editor-spezifischen Klassen auflistet und Tailwind anweisen, diese als eine der Quelldateien einzuschließen, die es auf Klassennamen überwacht.

Die Notwendigkeit, sich im Voraus auf Editor-Klassen festzulegen, hat mich in meiner Arbeit nie zurückgehalten, aber dies bleibt der Aspekt der Beziehung zwischen Tailwind und WordPress, nach dem ich am häufigsten gefragt werde.

Ein minimales WordPress-Theme mit minimaler Tailwind CSS-Integration

Beginnen wir mit dem einfachsten möglichen WordPress-Theme. Es gibt nur zwei erforderliche Dateien

• style.css
• index.php

Wir generieren style.css mit Tailwind. Für index.php beginnen wir mit etwas Einfachem

<!doctype html>
<html lang="en">
  <head>
    <?php wp_head(); ?>
    <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" media="all" />
  </head>
  <body>
    <?php
    if ( have_posts() ) {
      while ( have_posts() ) {
        the_post();
        the_title( '<h1 class="entry-title">', '</h1>' );
        ?>
        <div class="entry-content">
          <?php the_content(); ?>
        </div>
        <?php
      }
    }
    ?>
  </body>
</html>

Es gibt viele Dinge, die ein WordPress-Theme tun sollte und die der obige Code nicht tut – Dinge wie Paginierung, Beitrags-Thumbnails, Einbinden von Stylesheets anstelle der Verwendung von link-Elementen und so weiter –, aber das reicht aus, um einen Beitrag anzuzeigen und zu testen, ob Tailwind wie erwartet funktioniert.

Auf der Tailwind-Seite benötigen wir drei Dateien

• package.json
• tailwind.config.js
• Eine Eingabedatei für Tailwind

Bevor wir weitergehen, benötigen Sie npm. Wenn Sie sich damit unwohl fühlen, haben wir ein Anfängerhandbuch für npm, das ein guter Ausgangspunkt ist!

Da noch keine package.json-Datei vorhanden ist, erstellen wir eine leere JSON-Datei im selben Ordner wie index.php, indem wir diesen Befehl in unserem Terminal unserer Wahl ausführen

echo {} > ./package.json

Mit dieser Datei können wir Tailwind installieren

npm install tailwindcss --save-dev

Und generieren unsere Tailwind-Konfigurationsdatei

npx tailwindcss init

In unserer tailwind.config.js-Datei müssen wir Tailwind nur mitteilen, nach Utility-Klassen in unseren PHP-Dateien zu suchen

module.exports = {
  content: ["./**/*.php"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Wenn unser Theme Composer verwenden würde, möchten wir das vendor-Verzeichnis ignorieren, indem wir etwas wie "!**/vendor/**" zum content-Array hinzufügen. Aber wenn alle Ihre PHP-Dateien Teil Ihres Themes sind, funktioniert das Obige!

Wir können unserer Eingabedatei jeden beliebigen Namen geben. Erstellen wir eine Datei namens tailwind.css und fügen Sie dies hinzu

/*!
Theme Name: WordPress + Tailwind
*/

@tailwind base;
@tailwind components;
@tailwind utilities;

Der obere Kommentar ist erforderlich, damit WordPress das Theme erkennt; die drei @tailwind-Direktiven fügen jede der Tailwind-Schichten hinzu.

Und das war's! Wir können nun den folgenden Befehl ausführen

npx tailwindcss -i ./tailwind.css -o ./style.css --watch

Dies weist die Tailwind CLI an, unsere style.css-Datei zu generieren, wobei tailwind.css als Eingabedatei verwendet wird. Das Flag --watch wird die Datei style.css kontinuierlich neu erstellen, wenn Utility-Klassen aus einer PHP-Datei in unserem Projekt-Repository hinzugefügt oder entfernt werden.

Das ist so einfach, wie ein Tailwind-gestütztes WordPress-Theme denkbar sein könnte, aber es ist unwahrscheinlich, dass Sie es jemals in der Produktion einsetzen möchten. Lassen Sie uns also über einige Wege zu einem produktionsbereiten Theme sprechen.

Tailwind CSS zu einem bestehenden Theme hinzufügen

Es gibt zwei Gründe, warum Sie Tailwind CSS zu einem bestehenden Theme hinzufügen möchten, das bereits sein eigenes Vanilla-CSS hat

• Um das Hinzufügen von Tailwind-Komponenten zu einem bereits gestalteten Theme zu experimentieren
• Um ein Theme von Vanilla-CSS zu Tailwind zu migrieren

Wir demonstrieren dies, indem wir Tailwind in Twenty Twenty-One, dem Standard-WordPress-Theme, installieren. (Warum nicht Twenty Twenty-Two? Das neueste Standard-WordPress-Theme dient der Präsentation von Full-Site-Editing und ist keine gute Wahl für eine Tailwind-Integration.)

Zuerst sollten Sie das Theme in Ihrer Entwicklungsumgebung herunterladen und installieren, falls es dort noch nicht installiert ist. Danach müssen wir nur noch wenige Schritte befolgen

• Navigieren Sie im Terminal zu Ihrem Theme-Ordner.
• Da Twenty Twenty-One bereits eine eigene package.json-Datei hat, installieren Sie Tailwind, ohne eine neue zu erstellen

npm install tailwindcss --save-dev

• Fügen Sie Ihre tailwind.config.json-Datei hinzu

npx tailwindcss init

• Aktualisieren Sie Ihre tailwind.config.json-Datei so, dass sie derjenigen im vorherigen Abschnitt gleicht.
• Kopieren Sie die bestehende style.css-Datei von Twenty Twenty-One nach tailwind.css.

Jetzt müssen wir unsere drei @tailwind-Direktiven zur Datei tailwind.css hinzufügen. Ich schlage vor, Ihre tailwind.css-Datei wie folgt zu strukturieren

/* The WordPress theme file header goes here. */

@tailwind base;

/* All of the existing CSS goes here. */

@tailwind components;
@tailwind utilities;

Die Platzierung der base-Schicht unmittelbar nach dem Theme-Header stellt sicher, dass WordPress Ihr Theme weiterhin erkennt und gleichzeitig sicherstellt, dass der Tailwind-CSS-Reset so früh wie möglich in der Datei erscheint.

Das gesamte vorhandene CSS folgt der base-Schicht, wodurch sichergestellt wird, dass diese Stile Vorrang vor dem Reset haben.

Und schließlich folgen die Schichten components und utilities, damit sie Vorrang vor allen CSS-Deklarationen mit derselben Spezifität haben.

Und jetzt, wie bei unserem minimalen Theme, führen wir den folgenden Befehl aus

npx tailwindcss -i ./tailwind.css -o ./style.css --watch

Da Ihre neue style.css-Datei jetzt jedes Mal neu generiert wird, wenn Sie eine PHP-Datei ändern, sollten Sie Ihr überarbeitetes Theme auf geringfügige Rendering-Unterschiede zum Original überprüfen. Diese werden durch den CSS-Reset von Tailwind verursacht, der Dinge ein wenig weiter zurücksetzt, als einige Themes erwarten. Im Fall von Twenty Twenty-One bestand die einzige Korrektur, die ich vorgenommen habe, darin, text-decoration-line: underline zum a-Element hinzuzufügen.

Nachdem dieses Rendering-Problem behoben ist, fügen wir die Header Banner Component von Tailwind UI, der offiziellen Komponentenbibliothek von Tailwind, hinzu. Kopieren Sie den Code von der Tailwind UI-Website und fügen Sie ihn direkt nach dem Link „Skip to content“ in header.php ein

Ziemlich gut! Da wir nun Utility-Klassen verwenden wollen, um einige der bestehenden Klassen mit höherer Spezifität zu überschreiben, die im Theme eingebaut sind, fügen wir eine einzelne Zeile zur Datei tailwind.config.js hinzu

module.exports = {
  important: true,
  content: ["./**/*.php"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Dies markiert alle Tailwind CSS Utilities als !important, damit sie bestehende Klassen mit höherer Spezifität überschreiben können. (Ich habe important nie auf true in der Produktion gesetzt, aber ich würde es fast sicher tun, wenn ich dabei wäre, eine Website von Vanilla-CSS zu Tailwind zu konvertieren.)

Mit einer schnellen no-underline-Klasse, die zum „Learn more“-Link hinzugefügt wurde, und bg-transparent und border-0, die dem Dismiss-Button hinzugefügt wurden, sind wir fertig

Es sieht etwas befremdlich aus, Tailwind UI-Komponenten in ein Standard-WordPress-Theme integriert zu sehen, aber es ist eine großartige Demonstration von Tailwind-Komponenten und ihrer inhärenten Portabilität.

Von Grund auf neu beginnen

Wenn Sie ein neues Theme mit Tailwind erstellen, wird Ihr Prozess dem minimalen Beispiel oben ähneln. Anstatt die Tailwind-CLI direkt über die Befehlszeile auszuführen, möchten Sie wahrscheinlich separate npm-Skripte für Entwicklungs- und Produktions-Builds erstellen und auf Änderungen achten. Möglicherweise möchten Sie auch einen separaten Build speziell für den WordPress-Editor erstellen.

Wenn Sie nach einem Ausgangspunkt jenseits des minimalen Beispiels oben suchen – aber nicht so weit darüber hinaus, dass es eigene vorgegebene Stile mitbringt – habe ich einen Tailwind-optimierten WordPress-Theme-Generator erstellt, inspiriert von Underscores (_s), dem einst kanonischen WordPress-Starter-Theme. _tw genannt, ist dies der Schnellstart, den ich mir gewünscht hätte, als ich Tailwind zum ersten Mal mit WordPress kombiniert habe. Es bleibt der erste Schritt in all meinen Kundenprojekten.

Wenn Sie bereit sind, sich weiter von der Struktur eines typischen WordPress-Themes zu entfernen und Laravel Blade-Vorlagen in Ihr Toolkit aufzunehmen, ist Sage eine großartige Wahl, und sie haben eine Setup-Anleitung speziell für Tailwind, um Ihnen den Einstieg zu erleichtern.

---

Wie auch immer Sie beginnen, ich ermutige Sie, sich etwas Zeit zu nehmen, um sich mit Tailwind CSS vertraut zu machen und HTML-Dokumente mit Utility-Klassen zu gestalten: Es mag sich anfangs ungewohnt anfühlen, aber Sie werden bald mehr Kundenaufträge annehmen, als zuvor, weil Sie Websites schneller bauen als früher – und hoffentlich, wie ich, mehr Spaß dabei haben.