Dieses Tutorial beschreibt, wie du Tailwind CSS in Kombination mit dem Kirby CMS nutzen kannst. Voraussetzung dafür ist, dass du Node.js und NPM auf deinem System installiert hast. Unter macOS geht das schnell und einfach mit Hilfe von Homebrew.
Beginnen wir mit der Einrichtung. Zunächst erstellst du ein neues Kirby-Projekt über folgenden Composer-Befehl:
composer create-project getkirby/plainkit example-projectAlle folgenden Befehle beziehen sich auf das Projektverzeichnis, also das Verzeichnis example-project. Daher solltest du nun ins Projektverzeichnis wechseln:
cd example-projectNun muss eine leere package.json im Verzeichnis example-project angelegt werden und anschließend folgender Befehl ausgeführt werden:
npm init -yAnschließend müssen die für Tailwind CSS erforderlichen und empfohlenen Pakete mittels npm installiert werden:
npm install tailwindcss postcss-cli autoprefixer postcss-nesting cross-env cssnanoDabei werden alle Pakete in den Ordner node_modules geladen. Im nächsten Schritt muss die Tailwind CSS-Konfigurationsdatei (tailwind.config.js) erstellt werden. Dies geht am einfachsten über den Befehl:
npx tailwind initDie Datei tailwind.config.js dann wie folgt anpassen:
module.exports = {
purge: {
preserveHtmlElements: false,
content: [
'./site/templates/*.php',
'./site/snippets/*.php',
'./site/tailwind/*.css',
],
},
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [
],
}Anschließend benötigen wir die Datei postcss.config.js mit folgendem Inhalt:
module.exports = {
plugins: [
require('tailwindcss'),
require('postcss-nesting'),
require('autoprefixer'),
require('cssnano')({
preset: 'default',
}),
]
}Nun folgt das Tailwind CSS Stylesheet. Dazu im Verzeichnis site/tailwind/ die Datei tailwind.css mit folgendem Inhalt anlegen:
@tailwind base;
@tailwind components;
@tailwind utilities;Danach benötigen wir noch die Skripte zum Erstellen der fertigen Stylesheets, dazu in der Datei package.json den scripts-Bereich gegen folgende Zeilen austauschen:
"scripts": {
"build": "postcss site/tailwind/tailwind.css -o assets/style.css",
"watch": "postcss site/tailwind/tailwind.css -o assets/style.css --watch",
"prod": "cross-env NODE_ENV=production postcss site/tailwind/tailwind.css -o assets/style.css"
},Die erforderliche Datei style.css kann nun über einen der folgenden drei Befehle erzeugt werden:
npm run build
npm run watch
npm run prodDer Unterschied ist wie folgt:
npm run build erstellt eine Entwicklungsversion, die nicht optimiert und nicht minimiert ist.
npm run watch führt zum gleichen Ergebnis wie nem run build, allerdings wird permanent nach Änderungen geschaut und im Bedarfsfall die Datei style.css automatisch neu erstellt.
npm run prod erstellt eine für die Produktion optimierte style.css, die zusätzlich minimiert wird.
In Kirby CMS selbst kann die style.css-Datei nun über folgenden Befehl im <head> des gewünschten Templates eingefügt werde:
<?= css('assets/style.css') ?>Ab sofort lässt sich Tailwind CSS über die verschiedenen Klassen, wie auf der Tailwind CSS Website beschrieben, nutzen.