Utilitare pentru clase

Crearea atributelor class în șabloane presupune alipirea șirurilor, activarea și dezactivarea claselor în funcție de condiții și împiedicarea utilitarelor ulterioare să intre în conflict cu cele anterioare (p-2 și p-4 nu ar trebui să rămână ambele). În JavaScript, această muncă este împărțită între clsx și tailwind-merge. TailwindPHP include portări PHP ale ambelor, astfel încât obțineți același comportament fără instrumente Node.js și fără pachete Composer suplimentare.

Trei funcții acoperă toate cazurile: cn() construiește și rezolvă conflictele, merge() doar rezolvă conflictele, iar join() doar concatenează.

cn()

Utilitarul recomandat. Mai întâi construiește condițional, după modelul clsx, apoi rezolvă conflictele dintre Tailwind folosind tailwind-merge — astfel, ultima clasă utilitară aflată în conflict are prioritate.

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'

Argumente acceptate

cn() acceptă oricâte argumente. Fiecare este aplatizat și filtrat conform semanticii clsx:

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

Model pentru componente

cn() permite suprascrierea unei componente: combinați clasele proprii ale componentei cu cele transmise de apelant, iar conflictele se rezolvă în favoarea apelantului.

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>

Pentru stiluri declarative de componente, cu mai multe axe, combinați cn() cu variants().

merge()

Doar rezolvarea conflictelor — fără construire condițională. Transmiteți șiruri de clase; clasele ulterioare le suprascriu pe cele anterioare când vizează aceeași proprietate. Folosiți-o când intrarea este deja formată din șiruri simple.

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() este compus pe baza clsx folosind merge(), așa că apelați direct merge() doar când nu aveți nevoie de sintaxa condițională pentru array-uri.

join()

Simplă concatenare, fără rezolvarea conflictelor. Valorile false sunt eliminate, dar toate utilitarele aflate în conflict sunt păstrate. Folosiți-o când știți că nu există conflicte și doriți varianta cu cel mai mic cost.

use function TailwindPHP\join;

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

Pe care să o folosesc?

Importuri

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

Toate trei se află în spațiul de nume principal TailwindPHP și sunt incluse în pachet. Sunt portări PHP ale clsx (de Luke Edwards) și tailwind-merge (de Dany Castillo).