Klašu utilītas

class atribūtu veidošana veidnēs nozīmē virkņu savienošanu, klašu pārslēgšanu atkarībā no nosacījumiem un to, ka vēlāk pievienotās utilītas nedrīkst konfliktēt ar iepriekšējām (p-2 un p-4 nedrīkst abas palikt). JavaScript šis darbs sadalīts starp clsx un tailwind-merge. TailwindPHP ietver abu PHP realizācijas, tāpēc iegūstat tādu pašu darbību bez Node.js rīkkopas un papildu Composer pakotnēm.

Trīs funkcijas aptver visas vajadzības: cn() veido un novērš konfliktus, merge() novērš tikai konfliktus, bet join() tikai savieno virknes.

cn()

Ieteicamā utilīta. Vispirms tā veic nosacījumu apstrādi kā clsx, pēc tam atrisina Tailwind konfliktus ar tailwind-merge — tādējādi uzvar pēdējā konfliktējošā utilīta.

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'

Pieņemtie argumenti

cn() pieņem jebkādu argumentu skaitu. Katrs arguments tiek saplacināts un filtrēts atbilstoši clsx semantikai:

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

Komponenta paraugs

cn() ļauj pielāgot komponentu: apvienojiet komponenta klases ar zvanītāja padotajām klasēm, un konfliktu gadījumā priekšroka būs zvanītāja vērtībām.

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>

Deklaratīviem komponentu stiliem ar vairākām dimensijām apvienojiet cn() ar variants().

merge()

Tikai konfliktu atrisināšana — nosacījumi netiek apstrādāti. Padodiet klašu virknes; vēlākās klases aizstāj agrākās, ja tās attiecas uz vienu un to pašu īpašību. Izmantojiet šo funkciju, ja ievade jau sastāv no vienkāršām virknēm.

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() ir merge(), kas veidots uz clsx pamata, tāpēc izmantojiet tieši merge() tikai tad, ja jums nav vajadzīga nosacījumu sintakse ar masīviem.

join()

Vienkārši savieno virknes, neatrisinot konfliktus. Nepatiesās vērtības tiek atmestas, bet visas konfliktējošās utilītas tiek paturētas. Izmantojiet šo funkciju, ja zināt, ka konfliktu nav, un vēlaties pēc iespējas mazāku apstrādi.

use function TailwindPHP\join;

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

Kuru funkciju izmantot?

Importi

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

Visas trīs funkcijas atrodas galvenajā TailwindPHP nosaukumtelpā un ir iekļautas pakotnē. Tās ir PHP clsx (autors Luke Edwards) un tailwind-merge (autors Dany Castillo) realizācijas.