Utility tried

Zobraziť ako Markdown Upraviť na GitHub Dokumentácia na 3843abd

Vytváranie atribútov class v šablónach znamená spájanie reťazcov, prepínanie tried podľa podmienok a zabraňovanie konfliktom neskorších utilít s predchádzajúcimi (p-2 a p-4 by nemali zostať obe). V JavaScript je táto práca rozdelená medzi clsx a tailwind-merge. TailwindPHP obsahuje porty PHP oboch knižníc, takže dosiahnete rovnaké správanie bez reťazca nástrojov Node.js a bez ďalších balíkov Composer.

Trojica funkcií pokrýva celé spektrum: cn() vytvára a rieši konflikty, merge() rieši iba konflikty a join() iba spája reťazce.

cn()

Odporúčaná utilita. Najprv vytvorí podmienené triedy podľa vzoru clsx a potom pomocou tailwind-merge vyrieši konflikty Tailwind — pri konflikte tak vyhráva posledná utilita.

PHP

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'

Prijímané argumenty

cn() prijíma ľubovoľný počet argumentov. Každý rozbalí a filtruje podľa pravidiel clsx:

Argument	Správanie
`string`	Pridá sa bez úprav.
`int` / `float`	Prevedie sa na reťazec a pridá.
Sekvenčné pole	Každý prvok sa spracuje rekurzívne.
Pole `key => bool`	Každý kľúč sa pridá, ak je jeho hodnota pravdivá.
`null`, `false`, `0`, `''`	Ignorujú sa.

PHP

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

Vzor komponentu

cn() umožňuje nahrádzať triedy komponentu: spojte jeho vlastné triedy s triedami odovzdanými volajúcim a konflikty sa vyriešia v prospech volajúceho.

PHP

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>

Pri deklaratívnych štýloch komponentov s viacerými osami skombinujte cn() s variants().

merge()

Rieši iba konflikty, bez podmieneného vytvárania tried. Odovzdajte reťazce tried; neskoršie triedy prepíšu skoršie, ak nastavujú rovnakú vlastnosť. Použite ho, keď už máte obyčajné reťazce.

PHP

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() je merge() postavené na clsx, takže po merge() siahnite priamo iba vtedy, keď nepotrebujete syntax podmienených polí.

join()

Jednoduché spájanie bez riešenia konfliktov. Nepravdivé hodnoty sa odstránia, ale konfliktné utility zostanú všetky. Použite ho, keď viete, že konflikty nevzniknú a chcete čo najúspornejší variant.

PHP

use function TailwindPHP\join;

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

Ktorú funkciu mám použiť?

Funkcia	Vytvára (podmienky, polia)	Rieši konflikty	Použite, keď
`cn()`	áno	áno	Predvolená voľba — pri tvorbe reťazcov tried, v ktorých môžu vzniknúť konflikty.
`merge()`	nie	áno	Vstupom sú obyčajné reťazce a potrebujete iba riešiť konflikty.
`join()`	áno	nie	Viete, že konflikty nevzniknú, a chcete minimum spracovania.

Importy

PHP

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

Všetky tri funkcie sú v hlavnom mennom priestore TailwindPHP a sú súčasťou balíka. Ide o porty PHP clsx (od Luka Edwardsa) a tailwind-merge (od Danyho Castilla).