Uporaba
Osnovni potek dela je en sam klic: podajte TailwindPHP svojo vsebino in izbirno CSS konfiguracijo, vrne pa CSS za razrede, ki jih najde. Imena razredov se izluščijo iz označevalne kode, prevedejo glede na razrešeno temo, rezultat pa vsebuje samo pripomočke, ki jih dejansko uporabljate.
use TailwindPHP\tw;
$css = tw::generate('<div class="flex items-center p-4 bg-blue-500">Hello</div>');
Če drugega argumenta ni, generate() uporabi privzeti @import "tailwindcss" (tema + Prednastavljeni slogi + pripomočki). Za prilagoditev podajte niz CSS ali polje.
Pregledovanje vsebine
TailwindPHP poišče imena razredov tako, da v vaši vsebini prebere atributa class in className. Če želite preveriti, kaj se izlušči, uporabite tw::extractCandidates():
use TailwindPHP\tw;
tw::extractCandidates('<div class="flex p-4" className="bg-blue-500">');
// ['flex', 'p-4', 'bg-blue-500']
Pregledajo se atributa class in className, vrnjeni seznam pa ne vsebuje dvojnikov. Poljubni kandidati (na primer [mask-type:luminance] ali bg-[#1da1f2]) se izluščijo na enak način in prevedejo, če so veljavni. Vse, kar se pojavi tukaj, bo generate() prevedel.
Vhodne oblike
Vsaka statična metoda sprejema enega od treh enakih oblik vhodnih podatkov:
| Oblika | Podpis | Uporabite, kadar |
|---|---|---|
| Samo niz | tw::generate($content) |
Želite privzeto temo brez prilagoditev. |
| Niz + niz CSS | tw::generate($content, $css) |
Želite hitro prilagoditi temo ali dodati direktive neposredno v niz. |
| Polje | tw::generate(['content' => ..., 'css' => ...]) |
Potrebujete minify, importPaths ali 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,
]);
Edina oblika, ki sprejema možnosti, je polje. Poleg css in minify sprejema še importPaths (glejte Uvozi), cache in cacheTtl (glejte Predpomnjenje).
Ponovno uporabljiv prevajalnik
Prevajanje številnih delčkov z isto konfiguracijo — zanke zahtev, zbirke predlog, knjižnice komponent — je učinkovitejše z enim samim primerkom prevajalnika. tw::compile() enkrat razreši temo in oblikovalski sistem, nato pa ju znova uporablja:
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);
Prevajalnik omogoča tudi pregled lastnosti (properties(), computedProperties(), value(), computedValue()) in dostopnike do teme (colors(), breakpoints(), spacing()). Za vse metode glejte celotno API.
Konfiguriranje vhodnega CSS
Večina zmogljivosti TailwindPHP izhaja iz niza CSS, ki ga podate kot konfiguracijo. Nadaljujte z: