Kasutus

Vaata Markdownina Muuda teenuses GitHub Dokumentatsioon: 3843abd

Põhitöövoog koosneb ühest väljakutsest: anna TailwindPHP-ile oma sisu ja soovi korral CSS-konfiguratsioon ning see tagastab leitud klasside jaoks CSS. Klassinimed eraldatakse märgistuskeelest, kompileeritakse lahendatud teema põhjal ning tulem sisaldab ainult tegelikult kasutatavaid utiliite.

PHP

use TailwindPHP\tw;

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

Kui teist argumenti pole, kasutab generate() vaikimisi @import "tailwindcss"-i (teema + Preflight + utiliidid). Kohandamiseks anna string CSS või massiiv.

Sisu skannimine

TailwindPHP leiab klassinimed, lugedes sinu sisu atribuute class ja className. Väljavõetud andmete vaatamiseks kasuta tw::extractCandidates():

PHP

use TailwindPHP\tw;

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

Skannitakse mõlemad atribuudid, class ja className, ning tagastatav loend eemaldab duplikaadid. Suvalised kandidaadid, näiteks [mask-type:luminance] või bg-[#1da1f2], eraldatakse samal viisil ja kompileeritakse, kui need sobivad. Siin kuvatav on täpselt see, mille generate() kompileerib.

Sisendvormingud

Kõik staatilised meetodid aktsepteerivad samu kolme sisendivormi:

Vorming	Signatuur	Millal kasutada
Ainult string	`tw::generate($content)`	Vaiketeema, kohandamiseta.
String + CSS-string	`tw::generate($content, $css)`	Teema kiireks muutmiseks või direktiivide lisamiseks.
Massiiv	`tw::generate(['content' => ..., 'css' => ...])`	Kui vajad `minify`, `importPaths` või `cache` valikut.

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,
]);

Valikuid saab määrata ainult massiivivormis. Lisaks valikutele css ja minify aktsepteerib see ka valikut importPaths (vt Imports), valikut cache ja valikut cacheTtl (vt Caching).

Korduvkasutatav kompilaator

Kui kompileerid sama konfiguratsiooniga palju fragmente — päringutsüklis, mallide komplektis või komponenditeegis — on see ühe kompilaatorieksemplariga tõhusam. tw::compile() lahendab teema ja kujundussüsteemi ühe korra ning kasutab neid seejärel korduvalt:

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);

Kompilaator pakub ka atribuutide kontrolli (properties(), computedProperties(), value(), computedValue()) ja teemaga seotud meetodeid (colors(), breakpoints(), spacing()). Kõigi meetodite kohta vaata täielikku API.

Sisendi CSS konfigureerimine

Suur osa TailwindPHP-i võimalustest peitub konfiguratsioonina antavas CSS-stringis. Jätka siit:

Theme — @theme-muutujad ja nimeruumid.
Directives — @apply, @utility, @layer, @custom-variant.
Imports — @import, virtuaalmoodulid, importPaths ja Preflight.
@source — määra, milliseid faile ja klasse skannitakse.