Luokka-apufunktiot

class-attribuuttien rakentaminen malleissa tarkoittaa merkkijonojen yhdistämistä, luokkien ehdollista vaihtamista ja sen estämistä, etteivät myöhemmät apuluokat törmää aiempiin (p-2 ja p-4 eivät saa molemmat jäädä voimaan). JavaScript tämä työ jakautuu clsx- ja tailwind-merge-toimintojen kesken. TailwindPHP sisältää PHP-porttaukset molemmista, joten saat saman toiminnan ilman Node.js-työkaluketjua ja ylimääräisiä Composer-paketteja.

Kolme funktiota kattavat eri tarpeet: cn() muodostaa luokkajonon ja ratkaisee ristiriidat, merge() ratkaisee vain ristiriidat ja join() vain yhdistää.

cn()

Suositeltu apufunktio. Se muodostaa ehdolliset luokat ensin clsx-tyyliin ja ratkaisee sitten Tailwind-ristiriidat tailwind-merge-menetelmällä — viimeinen ristiriitainen apuluokka jää voimaan.

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'

Hyväksytyt argumentit

cn() hyväksyy minkä tahansa määrän argumentteja. Kukin litistetään ja suodatetaan clsx-semanttiikan mukaisesti:

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

Komponenttimalli

cn() mahdollistaa komponentin ylikirjoittamisen: yhdistä komponentin omat luokat kutsujan antamiin luokkiin, jolloin ristiriidat ratkaistaan kutsujan eduksi.

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>

Määriteltävissä oleviin, moniulotteisiin komponenttityyleihin yhdistä cn() ja variants().

merge()

Vain ristiriitojen ratkaisu — ei ehdollista luokkien muodostusta. Anna luokkajonoja; myöhemmät luokat korvaavat aiemmat, kun ne kohdistuvat samaan ominaisuuteen. Käytä tätä, kun syötteesi sisältää jo pelkkiä merkkijonoja.

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() koostuu merge()-toiminnosta ja sen päälle rakennetusta clsxistä, joten käytä suoraan merge()-toimintoa vain, jos et tarvitse ehdollista taulukkosyntaksia.

join()

Yksinkertainen yhdistäminen ilman ristiriitojen ratkaisua. Epätotuusarvoiset arvot pudotetaan, mutta kaikki ristiriitaiset apuluokat säilytetään. Käytä tätä, kun tiedät, ettei ristiriitoja ole ja haluat mahdollisimman kevyen vaihtoehdon.

use function TailwindPHP\join;

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

Mitä minun kannattaa käyttää?

Tuonnit

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

Kaikki kolme ovat paketin mukana toimitetussa TailwindPHP-nimiavaruudessa. Ne ovat PHP-porttauksia clsxistä (Luke Edwards) ja tailwind-merge-kirjastosta (Dany Castillo).