Používanie
Základný postup pozostáva z jediného volania: odovzdajte TailwindPHP svoj obsah a voliteľnú konfiguráciu CSS a vráti vám CSS pre nájdené triedy. Názvy tried sa získajú zo značiek, skompilujú sa podľa vyriešenej témy a výsledok obsahuje iba nástroje, ktoré skutočne používate.
use TailwindPHP\tw;
$css = tw::generate('<div class="flex items-center p-4 bg-blue-500">Hello</div>');
Ak nezadáte druhý argument, generate() použije predvolený @import "tailwindcss" (téma + Preflight + nástroje). Na prispôsobenie zadajte reťazec CSS alebo pole.
Prehľadávanie obsahu
TailwindPHP hľadá názvy tried čítaním atribútov class a className v obsahu. Ak chcete zistiť, čo sa načítava, použite tw::extractCandidates():
use TailwindPHP\tw;
tw::extractCandidates('<div class="flex p-4" className="bg-blue-500">');
// ['flex', 'p-4', 'bg-blue-500']
Prehľadávajú sa atribúty class aj className a vrátený zoznam neobsahuje duplicity. Rovnakým spôsobom sa získavajú aj ľubovoľné kandidáty, napríklad [mask-type:luminance] alebo bg-[#1da1f2], a ak sú platné, skompilujú sa. Všetko, čo sa tu objaví, skompiluje generate().
Vstupné formáty
Každá statická metóda prijíma rovnaké tri tvary vstupu:
| Formát | Signatúra | Kedy použiť |
|---|---|---|
| Iba reťazec | tw::generate($content) |
Predvolená téma bez prispôsobenia. |
| Reťazec + reťazec CSS | tw::generate($content, $css) |
Rýchle úpravy témy alebo direktívy priamo v reťazci. |
| Pole | tw::generate(['content' => ..., 'css' => ...]) |
Potrebujete minify, importPaths alebo 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,
]);
Možnosti prijíma iba forma s poľom. Okrem css a minify prijíma aj importPaths (pozrite si Importy), cache a cacheTtl (pozrite si Ukladanie do vyrovnávacej pamäte).
Opakovane použiteľný kompilátor
Kompilovanie viacerých úryvkov s rovnakou konfiguráciou — v cykle požiadaviek, dávke šablón alebo knižnici komponentov — je efektívnejšie s jedinou inštanciou kompilátora. tw::compile() raz vyrieši tému a systém dizajnu a potom ich opakovane používa:
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);
Kompilátor tiež umožňuje kontrolovať vlastnosti (properties(), computedProperties(), value(), computedValue()) a pristupovať k téme (colors(), breakpoints(), spacing()). Všetky metódy nájdete v úplnej referenčnej dokumentáciiAPI.
Konfigurácia vstupu CSS
Väčšina možností TailwindPHP spočíva v reťazci CSS, ktorý odovzdáte ako konfiguráciu. Pokračujte na: