Klasių priemonės

Kuriant class atributus šablonuose, reikia jungti eilutes, perjungti klases pagal sąlygas ir užtikrinti, kad vėliau nurodytos priemonės nesikirstų su ankstesnėmis (p-2 ir p-4 neturėtų likti abi). JavaScript šis darbas padalytas tarp clsx ir tailwind-merge. TailwindPHP pateikia abiejų PHP atitikmenis, todėl gaunate tokį patį veikimą be Node.js įrankių grandinės ir papildomų Composer paketų.

Trys funkcijos apima visus poreikius: cn() kuria ir sprendžia konfliktus, merge() tik sprendžia konfliktus, o join() tik sujungia eilutes.

cn()

Rekomenduojama priemonė. Pirmiausia ji atlieka sąlyginį kūrimą pagal clsx veikimo principą, tada išsprendžia Tailwind konfliktus naudodama tailwind-merge — laimi paskutinė konfliktuojanti utility klasė.

use function TailwindPHP\cn;

// Conflicts are resolved — px-4 overrides px-2
cn('px-2 py-1', 'px-4');
// => 'py-1 px-4'

// Conditional classes via a key => bool array
cn('btn', ['btn-primary' => true, 'btn-disabled' => false]);
// => 'btn btn-primary'

Priimami argumentai

cn() priima bet kokį argumentų skaičių. Kiekvienas argumentas išskaidomas ir perfiltruojamas pagal clsx semantiką:

cn('flex', ['items-center' => true], ['p-4', ['gap-2']], null);
// => 'flex items-center p-4 gap-2'

Komponento šablonas

cn() leidžia perrašyti komponento klases: sujunkite paties komponento klases su skambinančiojo perduotomis klasėmis, o konfliktai bus sprendžiami skambinančiojo naudai.

use function TailwindPHP\cn;

function Card(array $props = []): string {
    $class = cn(
        'rounded-lg border bg-card text-card-foreground shadow-sm',
        $props['class'] ?? null
    );
    return "<div class=\"{$class}\">" . ($props['children'] ?? '') . "</div>";
}

Card(['class' => 'p-6', 'children' => 'Content']);
// <div class="rounded-lg border bg-card text-card-foreground shadow-sm p-6">Content</div>

Deklaratyviems, kelių ašių komponentų stiliams naudokite cn() kartu su variants().

merge()

Tik konfliktų sprendimas — sąlyginio kūrimo nėra. Perduokite klasių eilutes; vėliau nurodytos klasės pakeičia ankstesnes, jei taikomos tai pačiai savybei. Naudokite, kai įvestis jau yra paprastos eilutės.

use function TailwindPHP\merge;

merge('px-2 py-1 bg-red-500', 'px-4 bg-blue-500');
// => 'py-1 px-4 bg-blue-500'

// Conflict resolution is variant-aware
merge('hover:bg-red-500', 'hover:bg-blue-500');
// => 'hover:bg-blue-500'

cn() yra merge(), sudarytas clsx pagrindu, todėl tiesiogiai rinkitės merge() tik tada, kai nereikia sąlyginės masyvo sintaksės.

join()

Paprastas sujungimas be konfliktų sprendimo. Neteisingos reikšmės atmetamos, bet visos konfliktuojančios utility klasės paliekamos. Naudokite, kai žinote, kad konfliktų nėra, ir norite pigiausio varianto.

use function TailwindPHP\join;

join('foo', 'bar', null, 'baz');
// => 'foo bar baz'

Kurią funkciją naudoti?

Importai

use function TailwindPHP\cn;
use function TailwindPHP\merge;
use function TailwindPHP\join;

Visos trys yra pagrindinėje TailwindPHP vardų srityje ir įtrauktos į paketą. Tai PHP clsx (Luke Edwards) ir tailwind-merge (Dany Castillo) atitikmenys.