Pomocné třídy

Vytváření atributů class v šablonách znamená spojování řetězců, přepínání tříd podle podmínek a zajištění, aby si pozdější pomocné třídy nekolidovaly s dřívějšími (p-2 a p-4 by neměly zůstat obě). V JavaScript tuto práci rozdělují clsx a tailwind-merge. TailwindPHP obsahuje porty obou knihoven PHP, takže dosáhnete stejného chování bez nástrojů Node.js a bez dalších balíčků Composer.

Tři funkce pokrývají různé potřeby: cn() sestavuje a řeší konflikty, merge() řeší pouze konflikty a join() pouze spojuje.

cn()

Doporučená pomocná funkce. Nejprve provede podmíněné sestavení ve stylu clsx a potom vyřeší konflikty Tailwind pomocí tailwind-merge — při konfliktu tedy vyhrává poslední pomocná třída.

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'

Přijímané argumenty

cn() přijímá libovolný počet argumentů. Každý zploští a odfiltruje podle pravidel clsx:

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

Vzor pro komponenty

Právě cn() umožňuje přepsat třídy komponenty: spojte její vlastní třídy s těmi, které předá volající, a případné konflikty se vyřeší ve prospěch volajícího.

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>

Pro deklarativní styly komponent s více osami zkombinujte cn() s variants().

merge()

Pouze řešení konfliktů — bez podmíněného sestavování. Předejte řetězce tříd; pozdější třídy přepíší dřívější, pokud se vztahují ke stejné vlastnosti. Použijte, když už máte obyčejné řetězce.

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, proto použijte přímo merge() pouze tehdy, když nepotřebujete syntaxi podmíněných polí.

join()

Jednoduché spojení bez řešení konfliktů. Nepravdivé hodnoty se zahodí, ale konfliktní pomocné třídy zůstanou všechny. Použijte, pokud víte, že ke konfliktům nedochází, a chcete co nejlevnější variantu.

use function TailwindPHP\join;

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

Kterou mám použít?

Importy

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

Všechny tři funkce jsou v hlavním jmenném prostoru TailwindPHP a jsou součástí balíčku. Jde o PHP porty clsx od Luka Edwardse a tailwind-merge od Danyho Castilla.