Publii Blank Template Tailwind CSS Version

Tailwind CSS & Publii CMS mit dem Tailwind Standalone CLI Tool

Als Basis Template kann das Publii Blank Theme verwendet werden: https://github.com/GetPublii/theme-Blank 

Installiere dieses Theme in Publii und aktiviere es für die gewünschte Webseite. 

Installiere nun das Tailwind Standalone CLI Tool direkt in das entsprechende Publii CMS Theme Verzeichnis (z.B. unter /Publii/sites/IHRE WEBSEITE/input/themes/blank/), um Tailwind CSS ohne Node.js verwenden zu können. Beschreibung hier:

https://tailwindcss.com/blog/standalone-cli

# Example for macOS arm64
curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-macos-arm64
chmod +x tailwindcss-macos-arm64
mv tailwindcss-macos-arm64 tailwindcss

# tailwind.config.js erstellen
./tailwindcss init

Die tailwind.config.js Datei anpassen:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './partials/*.hbs',
    './*.hbs'
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

tailwind.css Datei erstellen (Basis CSS Datei) - In diese Datei kommen später auch alle relevanten Styles und Anpassungen.

echo -e "\n@tailwind base;\n@tailwind components;\n@tailwind utilities;" > tailwind.css

CSS Datei kompilieren - Entwicklung

./tailwindcss -i tailwind.css -o assets/css/main.css --watch

Zum Testen füge z.B. in die index.hbs einen Testcode ein und erstelle mit Publii eine Vorschau.

<h1 class="bg-red-600 text-white">Test</h1>

CSS Datei kompilieren - Produktiv

./tailwindcss -i tailwind.css -o assets/css/main.css --minify