# 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](https://github.com/lukeed/clsx) a [tailwind-merge](https://github.com/dcastil/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.

```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'
```

### Přijímané argumenty

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

| Argument | Chování |
|----------|----------|
| `string` | Přidá se beze změny. |
| `int` / `float` | Převede se na řetězec a přidá. |
| Sekvenční pole | Každý prvek se zpracuje rekurzivně. |
| Pole `key => bool` | Každý klíč se přidá, pokud je jeho hodnota pravdivá. |
| `null`, `false`, `0`, `''` | Ignorují se. |

```php
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.

```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>
```

Pro deklarativní styly komponent s více osami zkombinujte `cn()` s [variants()](https://tailwindphp.inline0.dev/cs/docs/class-utilities/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.

```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, 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.

```php
use function TailwindPHP\join;

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

## Kterou mám použít?

| Funkce | Sestavuje (podmínky, pole) | Řeší konflikty | Použijte, když |
|----------|:---:|:---:|----------|
| `cn()`    | ano | ano | Výchozí volba — sestavujete řetězce tříd, u kterých může dojít ke konfliktu. |
| `merge()` | ne  | ano | Vstup tvoří obyčejné řetězce; potřebujete pouze řešit konflikty. |
| `join()`  | ano | ne  | Víte, že ke konfliktům nedochází, a chcete minimum práce. |

## Importy

```php
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.