Genesis Child Theme auf Basis von Tailwind CSS erstellen (Teil 1)

Dieses Tutorial beschreibt, wie ein Genesis Child Theme in Kombination mit Tailwind CSS, einer sehr modernen CSS-Bibliothek, erstellt wird. Tailwind beschreibt sich selbst als:

Tailwind is a utility-first CSS framework for rapidly building custom user interfaces.

In diesem Teil des Tutorials wird die benötigte Entwicklungsumgebung eingerichtet.

node.js installieren

Im ersten Schritt muss node.js und npm installiert werden, sofern nicht bereits vorhanden. Es gibt mehrere Möglichkeiten, dies zu tun. Du kannst den Installer von hier herunterladen oder node und npm via homebrew installieren, wenn du macOS benutzt. Wenn du ein anderes Betriebssystem verwendest, kannst du ggf. ein anderes Paketverwaltungswerkzeug (wie apt) verwenden.

npm initialisieren

Befor alle erforderlichen node-Pakete installiert werden muss ein Verzeichnis für das Theme angelegt werden. In diesem Beispiel heißt das Theme tailwind-demo. Aus diesem Grund muss das Verzeichnis [WP]/wp-content/themes/tailwind-demo angelegt werden. Anschließend in diesen Ordner wechseln und folgenden Befehl ausführen:

npm init

Man bekommt nun eine Menge Fragen gestellt – alle einfach mit Enter und dem Standardwert beantworten. Dadurch wird eine package.json im Theme-Verzeichnis angelgegt, die alle relevanten Informationen zu node.js für die Umgebung enthält.

Benötigte node-Pakete installieren

Nun müssen die erforderlichen node-Pakete installiert werden. Dazu folgenden befehl ausführen:

npm install css-mqpacker cssnano postcss-cli postcss-import tailwindcss --save-dev

Die Pakete sind:

  • css-mqpacker – kombiniert mehrere Media-Queries des selben Typs zu einem einzelnen Media Query
  • cssnano – Optimiert den generierten CSS-Code (entfernt Kommentare, …)
  • postcss-cli – postcss Client, benötigt, um die Konvertierung zu steuern
  • postcss-import – benötigt, um @import nutzen zu können
  • tailwindcss – Tailwind CSS selbst

PostCSS Konfiguration

Im nächsten Schritt muss eine Datei namens postcss.config.js im Theme-Verzeichnis angelegt werden. In diese Datei muss dann die benötigte PostCSS-Konfiguration eingefügt werden:

const tailwindcss = require('tailwindcss')
const cssnano = require('cssnano')
const autoprefixer = require('autoprefixer')
const postcssimport = require('postcss-import')
const cssmqpacker = require('css-mqpacker')


module.exports = {
    plugins: [
        postcssimport,
        tailwindcss('./tailwind.js'),
        cssnano({
            preset: 'default',
        }),
        cssmqpacker,
        autoprefixer
    ]
}

Tailwind-Konfiguration erstellen

Über folgenden Befehl wird im nächsten Schritt die Tailwind-Konfiguration erstellt:

./node_modules/.bin/tailwind init tailwind.js

Setup prüfen

Im nächsten Schritt wollen wir prüfen, ob das Setup korrekt funktioniert. Dazu die Datei ./src/main.css mit folgendem Inhalt erstellen:

@tailwind preflight;
@tailwind components;
@tailwind utilities;

Und dann folgenden Befehl ausführen:

./node_modules/postcss-cli/bin/postcss src/main.css -o main.css

Funktioniert alles korrekt ohne Fehlermeldung? Wird im Theme-Verzeichnis eine Datei main.css erstellt? Dann ist die Entwicklungsumgebung soweit fertig eingerichtet.

Weiter mit Teil 2.

Schreibe einen Kommentar