Ein Ghost Theme mit Tailwind CSS erstellen

In einem früheren Artikel habe ich beschrieben, wie man eine lokale Ghost-Entwicklungsumgebung unter Windows mit WSL einrichtet. Wenn du erfahren möchtest, wie duGhost lokal für die Theme-Entwicklung einrichtest, lese zuerst den vorherigen Artikel.

In diesem Artikel werden wir die lokale Umgebung nutzen, um ein Ghost Theme mit Tailwind CSS zu erstellen. Tailwind ist ein CSS Framework wie Twitter Bootstrap, mit dem man schöne Websites erstellen kann. Diese Website wurde in der Tat auch mit Tailwind CSS erstellt. Fangen wir an.

Ein Starter Theme holen

Zunächst brauchen wir ein Theme, dem wir Tailwind CSS hinzufügen können. Wir verwenden dafür das TryGhost/Starter Theme. Wechseln wir also in das Theme-Verzeichnis unserer lokal installierten Umgebung:

cd ~/ghost/content/themes

Klone das Starter Theme aus seinem GitHub-Repository mit dem Befehl:

git clone https://github.com/TryGhost/Starter.git yourthemename

Dabei ist yourthemename der Name deines Themes, das du erstellen möchtest. Git wird das Verzeichnis in dem Theme Verzeichnis erstellen und alle Inhalte aus dem entfernten Repository in dieses Verzeichnis klonen. Nun, da wir ein Theme haben, fügen wir Tailwind CSS zu dem Theme hinzu.

Tailwind CSS hinzufügen

Wechsel in das Theme Verzeichnis und füge Tailwind CSS mit yarn hinzu:

cd yourthemename
yarn add tailwindcss

Um Tailwind zu initialisieren, verwenden wir npx. npx wird mit npm installiert, das wir bereits während der Einrichtung der Umgebung installiert haben. Was ist der Unterschied? npm ist der Node Package Manager, der Pakete verwaltet, aber nicht für deren Ausführung verantwortlich ist. npx ist der Node Package Executer, der von npm verwaltete Pakete ausführen kann.

Initialisiere Tailwind CSS mit npx:

npx tailwindcss init

Dadurch wird eine initiale tailwind.config.js Datei erstellt. Nach Beendigung des Befehls solltest du über die Konfigurationsdatei informiert werden:

daniel@DESKTOP:~/ghost/content/themes/yourthemename$ npx tailwindcss init

Created Tailwind CSS config file: tailwind.config.js

Die Konfigurationsdatei wird verwendet, um Erweiterungen hinzuzufügen oder Tailwind anzupassen, z.B. um neue Schriftgrößen oder neue Farben hinzuzufügen.

Wir müssen noch die Tailwind CSS Dateien importieren. Füge daher in der Datei assets/css/screen.css die folgenden drei Zeilen ein, um die Tailwind Stylesheet-Dateien zu importieren:

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

Normalerweise verwenden Ghost Themes gulp.js für ihre Build-Chain. Um Tailwind zur gulp.js Build-Chain hinzuzufügen, müssen wir auch dessen Konfigurationsdatei anpassen. Füge daher in der gulpfile.js unter dem Kommentar // postcss plugins Folgendes hinzu:

const tailwind = require('tailwindcss');

Ändern auch die Definition der Funktion css() ab Zeile 38 und füge tailwind() in der Mitte der processors Variable ein:

function css(done) {
    var processors = [
        easyimport,
        colorFunction(),
        tailwind('./tailwind.config.js'),
        autoprefixer(),
        cssnano()
    ];
...

Um das Theme neu zu bauen, führe den Befehl yarn dev für das Theme aus. Jetzt kannst du damit beginnen, die CSS-Klassen von Tailwind zu deinem Theme hinzuzufügen. Viel Spaß beim Theming!