# Utility tried

Vytváranie atribútov `class` v šablónach znamená spájanie reťazcov, prepínanie tried podľa podmienok a zabraňovanie konfliktom neskorších utilít s predchádzajúcimi (`p-2` a `p-4` by nemali zostať obe). V JavaScript je táto práca rozdelená medzi [clsx](https://github.com/lukeed/clsx) a [tailwind-merge](https://github.com/dcastil/tailwind-merge). TailwindPHP obsahuje porty PHP oboch knižníc, takže dosiahnete rovnaké správanie bez reťazca nástrojov Node.js a bez ďalších balíkov Composer.

Trojica funkcií pokrýva celé spektrum: `cn()` vytvára a rieši konflikty, `merge()` rieši iba konflikty a `join()` iba spája reťazce.

## cn()

Odporúčaná utilita. Najprv vytvorí podmienené triedy podľa vzoru clsx a potom pomocou tailwind-merge vyrieši konflikty Tailwind — pri konflikte tak vyhráva posledná utilita.

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

### Prijímané argumenty

`cn()` prijíma ľubovoľný počet argumentov. Každý rozbalí a filtruje podľa pravidiel clsx:

| Argument | Správanie |
|----------|----------|
| `string` | Pridá sa bez úprav. |
| `int` / `float` | Prevedie sa na reťazec a pridá. |
| Sekvenčné pole | Každý prvok sa spracuje rekurzívne. |
| Pole `key => bool` | Každý kľúč sa pridá, ak je jeho hodnota pravdivá. |
| `null`, `false`, `0`, `''` | Ignorujú sa. |

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

### Vzor komponentu

`cn()` umožňuje nahrádzať triedy komponentu: spojte jeho vlastné triedy s triedami odovzdanými volajúcim a konflikty sa vyriešia v prospech volajúceho.

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

Pri deklaratívnych štýloch komponentov s viacerými osami skombinujte `cn()` s [variants()](https://tailwindphp.inline0.dev/sk/docs/class-utilities/variants).

## merge()

Rieši iba konflikty, bez podmieneného vytvárania tried. Odovzdajte reťazce tried; neskoršie triedy prepíšu skoršie, ak nastavujú rovnakú vlastnosť. Použite ho, keď už máte obyčajné reťazce.

```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, takže po `merge()` siahnite priamo iba vtedy, keď nepotrebujete syntax podmienených polí.

## join()

Jednoduché spájanie bez riešenia konfliktov. Nepravdivé hodnoty sa odstránia, ale konfliktné utility zostanú všetky. Použite ho, keď viete, že konflikty nevzniknú a chcete čo najúspornejší variant.

```php
use function TailwindPHP\join;

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

## Ktorú funkciu mám použiť?

| Funkcia | Vytvára (podmienky, polia) | Rieši konflikty | Použite, keď |
|----------|:---:|:---:|----------|
| `cn()`    | áno | áno | Predvolená voľba — pri tvorbe reťazcov tried, v ktorých môžu vzniknúť konflikty. |
| `merge()` | nie  | áno | Vstupom sú obyčajné reťazce a potrebujete iba riešiť konflikty. |
| `join()`  | áno | nie  | Viete, že konflikty nevzniknú, a chcete minimum spracovania. |

## Importy

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

Všetky tri funkcie sú v hlavnom mennom priestore `TailwindPHP` a sú súčasťou balíka. Ide o porty PHP clsx (od Luka Edwardsa) a tailwind-merge (od Danyho Castilla).