Klasside utiliidid

Mallides class-atribuutide loomine tähendab stringide ühendamist, klasside tingimuslikku vahetamist ja hilisemate utiliitide varasematega konflikti sattumise vältimist (p-2 ja p-4 ei tohiks mõlemad alles jääda). JavaScript on see töö jagatud kahe vahel: clsx ja tailwind-merge. TailwindPHP sisaldab mõlema PHP teisendusi, nii et saad sama käitumise ilma Node.js tööriistaahela ja lisapakettideta Composer.

Spektri katavad kolm funktsiooni: cn() loob ja lahendab konfliktid, merge() lahendab ainult konfliktid ning join() üksnes ühendab.

cn()

Soovitatav utiliit. Esmalt loob see tingimuslikke klasse clsx-i stiilis, seejärel lahendab Tailwind-konfliktid tailwind-merge abil — seega jääb kehtima viimane konfliktne utiliit.

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'

Lubatud argumendid

cn() aktsepteerib suvalise arvu argumente. Iga argument tasandatakse ja filtreeritakse clsx-i semantika järgi:

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

Komponendi muster

cn() muudab komponendi ülekirjutatavaks: ühenda komponendi enda klassid kutsuja edastatutega ning konfliktid lahendatakse kutsuja kasuks.

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>

Deklaratiivsete, mitmeteljeliste komponendistiilide jaoks kasuta cn() koos variants()-ga.

merge()

Ainult konfliktide lahendamine — tingimuslikku loomist ei toimu. Edasta klassistringid; sama atribuuti mõjutavate klasside korral kirjutavad hilisemad klassid varasemad üle. Kasuta seda siis, kui sisend koosneb juba lihtsatest stringidest.

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() on clsx-i peale ehitatud merge(), seega kasuta merge() otse ainult siis, kui sa ei vaja tingimuslikku massiivisüntaksit.

join()

Lihtne ühendamine konfliktide lahendamiseta. Tõeväärtuseta väärtused jäetakse välja, kuid kõik omavahel konfliktis olevad utiliidid säilivad. Kasuta seda siis, kui tead, et konflikte pole ja soovid kõige väiksemat kulu.

use function TailwindPHP\join;

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

Millist peaksin kasutama?

Impordid

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

Kõik kolm asuvad peamises TailwindPHP nimeruumis ja sisalduvad paketis. Need on clsx-i (autor Luke Edwards) ja tailwind-merge (autor Dany Castillo) PHP teisendused.