Utilizare
Fluxul de lucru de bază constă într-un singur apel: furnizați TailwindPHP conținutul dvs. și configurația opțională CSS, iar acesta returnează CSS pentru clasele găsite. Numele claselor sunt extrase din marcaj, compilate în raport cu tema rezolvată, iar rezultatul conține doar utilitarele pe care le folosiți efectiv.
use TailwindPHP\tw;
$css = tw::generate('<div class="flex items-center p-4 bg-blue-500">Hello</div>');
Fără un al doilea argument, generate() folosește un @import "tailwindcss" implicit (temă + Preflight + utilitare). Transmiteți un șir CSS sau un tablou pentru personalizare.
Scanarea conținutului
TailwindPHP găsește numele claselor citind atributele class și className din conținutul dvs. Pentru a inspecta ce este extras, folosiți tw::extractCandidates():
use TailwindPHP\tw;
tw::extractCandidates('<div class="flex p-4" className="bg-blue-500">');
// ['flex', 'p-4', 'bg-blue-500']
Sunt scanate atât atributele class, cât și className, iar lista returnată nu conține duplicate. Candidații arbitrari (precum [mask-type:luminance] sau bg-[#1da1f2]) sunt extrași în același mod și compilați dacă sunt valizi. Tot ce apare aici este exact ceea ce va compila generate().
Formate de intrare
Fiecare metodă statică acceptă aceleași trei forme de intrare:
| Format | Semnătură | Când se folosește |
|---|---|---|
| Doar șir | tw::generate($content) |
Tema implicită, fără personalizare. |
| Șir + șir CSS | tw::generate($content, $css) |
Ajustări rapide ale temei sau directive în linie. |
| Tablou | tw::generate(['content' => ..., 'css' => ...]) |
Aveți nevoie de minify, importPaths sau 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,
]);
Forma de tablou este singura care acceptă opțiuni. Pe lângă css și minify, acceptă importPaths (consultați Importuri), cache și cacheTtl (consultați Memorarea în cache).
Compilator reutilizabil
Compilarea mai multor fragmente cu aceeași configurație — o buclă de cereri, un set de șabloane, o bibliotecă de componente — este mai eficientă cu o singură instanță a compilatorului. tw::compile() rezolvă tema și sistemul de design o singură dată, apoi le reutilizează:
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);
Compilatorul oferă și inspectarea proprietăților (properties(), computedProperties(), value(), computedValue()) și accesori pentru temă (colors(), breakpoints(), spacing()). Consultați API complet pentru toate metodele.
Configurarea intrării CSS
Cea mai mare parte a puterii TailwindPHP se află în șirul CSS pe care îl transmiteți drept configurație. Continuați cu: