Verwendung

Als Markdown anzeigen Auf GitHub bearbeiten Dokumentation zu 3843abd

Der grundlegende Ablauf besteht aus einem einzigen Aufruf: Übergib TailwindPHP deine Inhalte und eine optionale CSS-Konfiguration. Du erhältst die CSS für die gefundenen Klassen zurück. Klassennamen werden aus dem Markup extrahiert und anhand des aufgelösten Themes kompiliert. Das Ergebnis enthält nur die tatsächlich verwendeten Utilities.

PHP

use TailwindPHP\tw;

$css = tw::generate('<div class="flex items-center p-4 bg-blue-500">Hello</div>');

Ohne zweites Argument verwendet generate() eine standardmäßige @import "tailwindcss" (Theme + Preflight + Utilities). Zur Anpassung übergib einen CSS-String oder ein Array.

Inhalte durchsuchen

TailwindPHP findet Klassennamen, indem es die Attribute class und className in deinen Inhalten ausliest. Mit tw::extractCandidates() kannst du prüfen, was extrahiert wird:

PHP

use TailwindPHP\tw;

tw::extractCandidates('<div class="flex p-4" className="bg-blue-500">');
// ['flex', 'p-4', 'bg-blue-500']

Sowohl das Attribut class als auch className wird durchsucht; die zurückgegebene Liste enthält keine Duplikate. Beliebige Kandidaten wie [mask-type:luminance] oder bg-[#1da1f2] werden auf dieselbe Weise extrahiert und kompiliert, wenn sie gültig sind. Alles, was hier auftaucht, wird genau von generate() kompiliert.

Eingabeformate

Jede statische Methode akzeptiert dieselben drei Eingabeformen:

Format	Signatur	Verwendung
Nur String	`tw::generate($content)`	Standard-Theme ohne Anpassungen.
String + CSS-String	`tw::generate($content, $css)`	Schnelle Theme-Anpassungen oder Direktiven direkt im String.
Array	`tw::generate(['content' => ..., 'css' => ...])`	Wenn du `minify`, `importPaths` oder `cache` benötigst.

PHP

use TailwindPHP\tw;

// Format 1: String only
tw::generate('<div class="flex">');

// Format 2: String + CSS string
tw::generate('<div class="flex">', '@import "tailwindcss"; @theme { --color-brand: #3b82f6; }');

// Format 3: Array with content, css, and options
tw::generate([
    'content' => '<div class="flex p-4">',
    'css'     => '@import "tailwindcss";',
    'minify'  => true,
]);

Nur die Array-Form akzeptiert Optionen. Neben css und minify unterstützt sie importPaths (siehe Imports), cache und cacheTtl (siehe Caching).

Wiederverwendbarer Compiler

Wenn du viele Fragmente mit derselben Konfiguration kompilierst – etwa in einer Anfrageschleife, für eine Vorlagenserie oder eine Komponentenbibliothek –, sparst du mit einer einzigen Compiler-Instanz Aufwand. tw::compile() löst Theme und Designsystem einmal auf und verwendet sie anschließend wieder:

PHP

use TailwindPHP\tw;

$compiler = tw::compile('@import "tailwindcss"; @theme { --color-brand: #3b82f6; }');

$css        = $compiler->generate('<div class="flex p-4 bg-brand">');
$candidates = $compiler->extractCandidates('<div class="flex p-4 bg-brand">');
$minified   = $compiler->minify($css);

Der Compiler bietet außerdem Funktionen zum Untersuchen von Eigenschaften (properties(), computedProperties(), value(), computedValue()) und zum Zugriff auf das Theme (colors(), breakpoints(), spacing()). Eine vollständige Übersicht aller Methoden findest du in der API.

Konfigurieren der Eingabe CSS

Die meisten Möglichkeiten von TailwindPHP stecken im CSS-String, den du als Konfiguration übergibst. Hier geht es weiter:

Theme — @theme-Variablen und Namensräume.
Directives — @apply, @utility, @layer, @custom-variant.
Imports — @import, virtuelle Module, importPaths und Preflight.
@source — steuere, welche Dateien und Klassen durchsucht werden.