Användning
Det grundläggande arbetsflödet består av ett enda anrop: ange TailwindPHP ditt innehåll och valfri CSS konfiguration, så returneras CSS för de klasser som hittas. Klassnamnen hämtas från markuppen, kompileras mot det lösta temat och resultatet innehåller bara de verktygsklasser du faktiskt använder.
use TailwindPHP\tw;
$css = tw::generate('<div class="flex items-center p-4 bg-blue-500">Hello</div>');
Utan ett andra argument använder generate() en standardinställd @import "tailwindcss" (tema + Förinställningar + verktygsklasser). Skicka med en CSS-sträng eller en array för att anpassa.
Innehållsskanning
TailwindPHP hittar klassnamn genom att läsa attributen class och className i ditt innehåll. Om du vill se vad som hämtas använder du tw::extractCandidates():
use TailwindPHP\tw;
tw::extractCandidates('<div class="flex p-4" className="bg-blue-500">');
// ['flex', 'p-4', 'bg-blue-500']
Attributen class och className skannas båda, och den returnerade listan innehåller inga dubbletter. Godtyckliga kandidater (som [mask-type:luminance] eller bg-[#1da1f2]) hämtas på samma sätt och kompileras om de är giltiga. Det som visas här är exakt det som generate() kompilerar.
Indataformat
Varje statisk metod tar emot samma tre typer av indata:
| Format | Signatur | Använd när |
|---|---|---|
| Endast sträng | tw::generate($content) |
Standardtema, ingen anpassning. |
| Sträng + CSS-sträng | tw::generate($content, $css) |
Snabba temajusteringar eller direktiv direkt i strängen. |
| Array | tw::generate(['content' => ..., 'css' => ...]) |
Du behöver minify, importPaths eller cache. |
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,
]);
Arrayformatet är det enda som tar emot alternativ. Utöver css och minify tar det emot importPaths (se Importer), cache och cacheTtl (se Cachelagring).
Återanvändbar kompilator
När många fragment kompileras med samma konfiguration – en förfrågningsloop, en uppsättning mallar eller ett komponentbibliotek – går det snabbare med en enda kompilatorinstans. tw::compile() löser temat och designsystemet en gång och återanvänder dem sedan:
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);
Kompilatorn ger också åtkomst till egenskapsinspektion (properties(), computedProperties(), value(), computedValue()) och temafunktioner (colors(), breakpoints(), spacing()). Se den fullständiga API för alla metoder.
Konfigurera indata CSS
En stor del av TailwindPHPs kraft finns i strängen CSS som du skickar med som konfiguration. Läs vidare om: