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…

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

Neueste Blog Einträge:

Cronjobs unter MacOS mit BetterTouchTool

Die ultimative Alternative zu Cronjobs auf MacOS: BetterTouchTool zum Automatisieren von Aufgaben!

Backup MacOS

Fotos effizient verkleinern und sicher offline synchronisieren

Wir haben ein Bash Script entwickelt, dass die Größe aller Fotos im angegebenen Verzeichnis inkl. Unterverzeichnisse verkleinert. Die Funktionen sind: Die verkleinerten Fotos können un…
Android Backup Linux MacOS

Cloudpanel Error - /usr/bin/clpctl: 5: printf: %q: invalid directive

Je nach Server OS bzw. Einstellungen kann bei Cloudpanel im CLI Modus diese Fehlermeldung kommen: $ sudo clpctl db:show:master-credentials /usr/bin/clpctl: 5: printf: %q: invalid directive…
CloudPanel

Bereit für Ihr Projekt?