Codekeks

Pinegrow 8.5 + Tailwind

Pinegrow 8.5 + Tailwind ohne CDN (DSGVO‑konform)

Ziel: Tailwind lokal bauen (kein CDN), sauber mit Pinegrow 8.5 nutzen – inkl. WordPress‑Hinweisen, v4‑Setup, Design‑Panel‑Fix, Troubleshooting & Legacy‑Variante (v3).

Kurzfassung: Für Tailwind v4 brauchst du keine tailwind.config.js mehr. Du arbeitest mit einer einzigen Eingabedatei (src/input.css), in der du @import "tailwindcss"; schreibst. Pinegrow nutzt einen externen Build (npm/CLI) und lädt deine generierte assets/css/tailwind.css. Für das Pinegrow‑Design‑Panel füge einen @theme { … }‑Block mit Markern ein (siehe unten).

1) Voraussetzungen

  • Pinegrow 8.5 (oder neuer)
  • macOS (Mac mini / MacBook), Terminal
  • Node.js (empfohlen LTS), npm

Prüfen im Terminal: node -v und npm -v

2) Projekt anlegen (Beispielstruktur)

mein-projekt/
├─ src/
│  └─ input.css          ← Eingabe für Tailwind
├─ assets/
│  └─ css/
│     └─ tailwind.css    ← Ausgabedatei (wird erzeugt)
├─ index.html            ← oder dein WP‑Theme
└─ _pginfo/              ← wird von Pinegrow erzeugt

Tipp: Lege den Ordner in ~/Programmierung/ ab (z. B. ~/Programmierung/fantico-tailwind).

3) Tailwind v4 installieren (lokal, ohne CDN)

Im Projektordner:

cd ~/Programmierung/fantico-tailwind
npm install -D @tailwindcss/cli tailwindcss postcss autoprefixer

@tailwindcss/cli sorgt dafür, dass das tailwindcss‑Binary zuverlässig unter nodemodules/.bin/ vorhanden ist.

4) src/input.css erstellen

Erzeuge die Datei \\ mit folgendem Inhalt:

@import "tailwindcss";

/* Tailwind v4: Theme‑Block für Pinegrow Design‑Panel */
@theme {
  /* Pinegrow generated Design Panel Theme Begin */
  /* Pinegrow generated Design Panel Theme End */
}

/* Optional: Eigene Basis‑Styles */
@layer base {
  body { @apply bg-white text-gray-900; }
}

Wichtig: Der @theme { … }‑Block mit den zwei Kommentarzeilen ist für Pinegrow nötig, damit das Design‑Panel (Farben, Fonts, Spacing) Variablen an genau dieser Stelle einfügen kann.

5) Pinegrow konfigurieren (Tailwind‑Panel)

  1. Projekt in Pinegrow öffnen
  2. Tailwind → Settings:

– Compiler: External build process
– Source CSS file: src/input.css
– Generated CSS file: assets/css/tailwind.css
– Config file: leer lassen (v4 benötigt standardmäßig keine Konfigurationsdatei)

  1. Speichern.

Entferne in allen Seiten/Templates CDN‑Links auf Tailwind. Wir binden nur die lokale CSS ein.

6) Build‑Skripte (npm) und Watch

Füge in deiner package.json (falls vorhanden) folgende Scripts hinzu:

{
  "scripts": {
    "dev": "tailwindcss -i ./src/input.css -o ./assets/css/tailwind.css --postcss --watch",
    "build": "tailwindcss -i ./src/input.css -o ./assets/css/tailwind.css --postcss --minify"
  }
}

Alternativ kannst du die CLI auch ohne Scripts starten, z. B.:\
npx tailwindcss -i ./src/input.css -o ./assets/css/tailwind.css --watch

Watch starten:

npm run dev

→ Tailwind erzeugt/aktualisiert assets/css/tailwind.css bei jeder Änderung.

7) CSS einbinden (HTML & WordPress)

HTML

<link rel="stylesheet" href="assets/css/tailwind.css">

WordPress (Theme)

// functions.php
add_action('wp_enqueue_scripts', function () {
  $path = get_template_directory() . '/assets/css/tailwind.css';
  wp_enqueue_style(
    'theme-tailwind',
    get_template_directory_uri() . '/assets/css/tailwind.css',
    [],
    file_exists($path) ? filemtime($path) : null
  );
});

DSGVO‑Hinweis: Keine externen Styles/Fonts nachladen. Google‑Fonts lokal hosten, CDN‑Links entfernen.

8) Arbeiten in Pinegrow

  • Nutze das Tailwind‑Panel, um Klassen zu setzen (z. B. p-6 bg-slate-900 text-white rounded-xl).
  • Speichere die Datei → der Watch‑Build aktualisiert tailwind.css → Pinegrow lädt neu.
  • Design‑Panel: Farben/Typo/Spacing pflegst du über den @theme‑Block. Pinegrow schreibt die Variablen zwischen die Marker.

9) Troubleshooting

Problem: tailwindcss init -p funktioniert nicht / „Invalid command: init“\
Ursache: Tailwind v4 – der init‑Befehl existiert nicht mehr.\
Lösung: Mit v4 arbeitest du ohne tailwind.config.js. Nutze @import "tailwindcss"; und die CLI‑Optionen.

Problem: Pinegrow meldet “Unable to update Tailwind CSS theme – The marker for Design Panel CSS variables in @theme are missing.”\
Ursache: @theme { … }‑Block bzw. Marker fehlen.\
Lösung: In src/input.css hinzufügen:

@theme {
  /* Pinegrow generated Design Panel Theme Begin */
  /* Pinegrow generated Design Panel Theme End */
}

Problem: tailwindcss nicht in nodemodules/.bin\
Ursache: CLI nicht verlinkt/mitinstalliert.\
Lösung:

npm install -D @tailwindcss/cli tailwindcss postcss autoprefixer

Problem: Styles fehlen / Klassen „weggepurgt“\
Ursache: Bei v4 steuert der Parser über CLI‑Optionen/Defaults; dynamisch zusammengesetzte Klassen werden ggf. nicht erkannt.\
Lösungen:

  • Nutze klare, statische Klassennamen im Markup.
  • Falls du v3‑Purging bevorzugst (mit content‑Globs & safelist), nutze die Legacy‑Variante unten.

10) (Optional) Legacy‑Variante: Tailwind v3 in Pinegrow

Wenn du die „alte“ Arbeitsweise mit \\ bevorzugst (z. B. für Tutorials/Globs/Safelist):

rm -rf node_modules package-lock.json
npm install -D tailwindcss@3.4 postcss autoprefixer
./node_modules/.bin/tailwindcss init -p

\\ (Beispiel):

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './**/*.{html,php,js}',
    '_pginfo/used-classes.html'
  ],
  theme: { extend: {} },
  plugins: [],
}

\\ (v3):

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

Scripts:

{
  "scripts": {
    "dev": "tailwindcss -i ./src/input.css -o ./assets/css/tailwind.css --postcss --watch",
    "build": "tailwindcss -i ./src/input.css -o ./assets/css/tailwind.css --postcss --minify"
  }
}

In Pinegrow bei v3 kannst du im Tailwind‑Panel zusätzlich eine Config file setzen (tailwind.config.js).

11) DSGVO‑Checkliste

12) Befehls‑Cheatsheet

# Installieren (v4‑Empfehlung)
npm install -D @tailwindcss/cli tailwindcss postcss autoprefixer

# Watch‑Build (v4)
npx tailwindcss -i ./src/input.css -o ./assets/css/tailwind.css --watch

# Produktions‑Build (minifiziert)
npx tailwindcss -i ./src/input.css -o ./assets/css/tailwind.css --minify

# Legacy v3 installieren
npm install -D tailwindcss@3.4 postcss autoprefixer
./node_modules/.bin/tailwindcss init -p

13) WordPress‑Snippet (lokales Enqueue)

add_action('wp_enqueue_scripts', function () {
  $rel = '/assets/css/tailwind.css';
  $abs = get_template_directory() . $rel;
  wp_enqueue_style('theme-tailwind', get_template_directory_uri() . $rel, [], file_exists($abs) ? filemtime($abs) : null);
});

Fertig!\
Damit arbeitest du in Pinegrow 8.5 mit Tailwind komplett lokal und DSGVO‑freundlich. Wenn du magst, passe ich dir das How‑To noch auf deine Codekeks‑Base/Child‑Theme‑Struktur an (Templates, Parts, Patterns, dynamische Klassen/Safelist).