Seit ich das Tailwind CSS Framework entdeckt habe, habe ich es schon für einige meiner Vue.js und Nuxt.js Projekte verwendet. Einige Projekte habe ich hier auf VIARAMI auch dokumentiert. Mir ermöglicht es, schnell und unkompliziert visuelle Ideen in konkreten CSS Code zu verwandeln.
Nun wollte ich Tailwind auch für ein Teil meiner WordPress Projekte beziehungsweise deren Themes verwenden. Dies gestaltete sich allerdings schwieriger als erwartet.
Für WordPress und die Entwicklung von Themes gibt es keine festen Prozesse, wie es etwa bei den Javascript-Frameworks. Dies hat zwar den Vorteil, dass man viele Freiheiten hat, aber es gibt eben auch keine standardmäßigen Möglichkeiten für die Einbildung von Frameworks.
Natürlich würde die Möglichkeit bestehen, einfach die CSS-Datei von Tailwind in das Theme einzubinden. Dies hat aber den Nachteil, dass alle Klassen sich in der Datei befinden, auch die Ungenutzten und so die Datei unnötig groß ist. Außerdem ist so nur die Verwendung dieser Klassen in einer separaten Datei auch nicht möglich.
Was nun? Nach einer intensiven Suche stieß ich auf einige Beispiele für die Verwendung von Tailwind in einem WordPress Theme. Hier wurden aber zusätzlich Technologien, die ich nicht benötige, verwendet und zum Teil waren sie sehr unübersichtlich und mit Abhängigkeiten verbunden.
So musste ich mir also eine eigene Methode für die Integration von Tailwind CSS in ein WordPress Theme. Es ist sicher nicht die Eleganteste und sie ließe sich sicher auch verbessern, aber sie ist die minimal invasivste Möglichkeit, die ich finden konnte. Außerdem ermöglicht sie es, sie auch in vorhanden Code zu integrieren, ohne die Struktur zu stark zu verändern.
Hier nun also die Schritt für Schritt Anleitung für die Integration des Tailwind CSS Frameworks in ein WordPress Theme.
Für dieses Tutorial verwende ich ein frisches Starter-Theme, aber die Anleitung lässt sich auch auf bestehende Themes anwenden. Den ganzen Code findest du auf Github.
Anleitung
Zuerst müssen wir npm einrichten und geben folgenden Code über die Command-line im Verzeichnis des Themes ein.
npm init
Nun können wir weitere benötigte Pakete installieren.
npm install @fullhuman/postcss-purgecss cross-env tailwindcss autoprefixer postcss-cli --save-dev
Nun sollte sich eine package.json Datei und ein node_modules Ordner im Verzeichnis befinden. Je nachdem wie du deine Themes auf den Produktionsserver hochlädst, solltest du diese später entfernen.
Die package.json Datei sollte nun in etwa so aussehen.
{
"name": "akiko",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "VIARAMI",
"license": "ISC",
"devDependencies": {
"@fullhuman/postcss-purgecss": "^2.3.0",
"autoprefixer": "^9.8.6",
"cross-env": "^7.0.2",
"postcss-cli": "^7.1.2",
"tailwindcss": "^1.7.6"
}
}
npx tailwindcss init
Mit diesem Befehl wird eine Konfigurationsdatei für Tailwind erstellt. Hier lassen sich später global die Farben, Abstände und mehr ändern. Hier ändern wir vorerst nur purge auf false. Die tailwind.config.js Datei sieht dann so aus.
module.exports = {
purge: false,
theme: {
extend: {},
},
variants: {},
plugins: [],
}Nun kommen wir zu einem entscheidenden Punkt, der Configuration von PostCSS. Wir legen eine neue postcss.config.js an. PostCSS generiert die spätere CSS-Datei. In diesem Schritt werden auch die überflüssigen Klassen entfernt. PurgeCSS durchsucht dabei alle .php, .js und .html Dateien.
const tailwindcss = require("tailwindcss");
module.exports = {
plugins: [
tailwindcss("./tailwind.config.js"),
require("autoprefixer"),
process.env.NODE_ENV === "production" &&
require("@fullhuman/postcss-purgecss")({
content: ["./**.php", "./**/**.php", "./**.html", "./**.js"],
defaultExtractor: (content) => content.match(/[A-Za-z0-9-_:/]+/g) || [],
}),
],
};
Im Order assets/css/ (dieser kann frei gewählt werden) legen wir nun eine Tailwind.css Datei an. Hier verwenden wir die @Tailwind-Direktive, um die Basis, Komponenten und Dienstprogramme von Tailwind zu injizieren.
@tailwind base; @tailwind components; /* purgecss start ignore */ /* purgecss end ignore */ @tailwind utilities;
Hier ist auch der Ort, wo zusätzliche Klassen erstellt werden können und nicht wie üblich in der style.css. Apropos style.css, das CSS aus dieser kann entfernt werden, da es sonst Konflikte gibt.
Für die Erstellung unserer CSS-Datei brauchen wir ein Script. Genauer fügen wir zwei Skripte in die package.json.
"dev:css": "postcss ./assets/css/tailwind.css -o ./assets/css/main.css", "build:css": "cross-env NODE_ENV=production postcss ./assets/css/tailwind.css -o ./assets/css/main.css"
Diese zwei Kommandos legen eine main.css im Ordner von tailwind.css an. Diese muss nun noch in WordPress eingebunden werden.
wp_enqueue_style('akiko-tailwind', get_template_directory_uri() . '/assets/css/main.css', array() );
Zur Auswahl stehen nun zwei Kommandos. Mit “npm run dev:css” wird eine main.css Datei angelegt mit allen CSS-Klassen von Tailwind mit einer Größe von 2,4 MB. Sie ist gut für die Entwicklung, da man so alle Features verwenden kann. Mit “npm run build:css” wird die CSS-Datei für die öffentliche Seite erstellt. In ihr sind nur die Teile von Tailwind enthalten, die auch gebraucht werden. Verwendet man neue Klassen, wie zum Beispiel bg-red-400, muss die main.css neu generiert werden.
Nun haben wir also Tailwind CSS in ein WordPress Theme integriert. Der Beispielcode für dieses Tutorial ist auf Github.
Jetzt kann man beginnen das Theme nach seinen Wünschen zu gestalten. Hier kann man die Klassen direkt im Theme und den .php Dateien verwenden oder man verwendet die tailwind.css Datei.