# Osztálysegédek

A sablonokban használt `class` attribútumok összeállításához karakterláncokat kell összefűzni, feltételesen kell osztályokat hozzáadni, és meg kell akadályozni, hogy a későbbiek ütközzenek a korábbiakkal (`p-2` és `p-4` nem maradhat meg egyszerre). JavaScript környezetben ezt a feladatot a [clsx](https://github.com/lukeed/clsx) és a [tailwind-merge](https://github.com/dcastil/tailwind-merge) végzi. A TailwindPHP mindkettő PHP portját tartalmazza, így ugyanazt a működést kapja Node.js eszközlánc és további Composer csomagok nélkül.

Három függvény fedi le a lehetőségeket: a `cn()` létrehozza és feloldja az ütközéseket, a `merge()` csak az ütközéseket oldja fel, a `join()` pedig csak összefűz.

## cn()

Az ajánlott segédfüggvény. Először a clsx stílusában, feltételek alapján állítja össze az osztályokat, majd feloldja a Tailwind ütközéseit a tailwind-merge segítségével — így az utolsó ütköző segédosztály érvényesül.

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

### Elfogadott argumentumok

A `cn()` tetszőleges számú argumentumot fogad. Mindegyiket a clsx szemantikája szerint lapítja ki és szűri:

| Argumentum | Működés |
|----------|----------|
| `string` | Változtatás nélkül hozzáadja. |
| `int` / `float` | Karakterlánccá alakítja, majd hozzáadja. |
| Egymásba ágyazott tömb | Minden elemet rekurzívan dolgoz fel. |
| `key => bool` tömb | Minden kulcsot hozzáad, ha az értéke igaz. |
| `null`, `false`, `0`, `''` | Figyelmen kívül hagyja. |

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

### Komponensminta

A `cn()` teszi felülírhatóvá a komponenst: egyesítse a komponens saját osztályait a hívó által átadottakkal; az ütközéseknél a hívó osztályai érvényesülnek.

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

Deklaratív, több tengely mentén variálható komponensstílusokhoz párosítsa a `cn()` függvényt a [variants()](https://tailwindphp.inline0.dev/hu/docs/class-utilities/variants) megoldással.

## merge()

Csak az ütközéseket oldja fel, feltételes osztályépítés nélkül. Osztálykarakterláncokat adjon át; az azonos tulajdonságot célzó későbbi osztályok felülírják a korábbiakat. Akkor használja, ha a bemenet már egyszerű karakterláncokból áll.

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

A `cn()` a clsx-re épülő `merge()`, ezért csak akkor használja közvetlenül a `merge()` függvényt, ha nincs szüksége a feltételes tömbös szintaxisra.

## join()

Egyszerű összefűzés ütközésfeloldás nélkül. Az üres értékeket elhagyja, az ütköző segédosztályokat viszont mind megtartja. Akkor használja, ha biztos benne, hogy nincsenek ütközések, és a legkisebb ráfordításra törekszik.

```php
use function TailwindPHP\join;

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

## Melyiket használjam?

| Függvény | Összeállít (feltételek, tömbök) | Feloldja az ütközéseket | Mikor használja |
|----------|:---:|:---:|----------|
| `cn()`    | igen | igen | Alapértelmezett választás — ütköző osztálykarakterláncok építéséhez. |
| `merge()` | nem  | igen | A bemenet egyszerű karakterláncokból áll; csak az ütközéseket kell feloldani. |
| `join()`  | igen | nem  | Biztos benne, hogy nincs ütközés, és a lehető legkevesebb műveletet szeretné. |

## Importok

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

Mindhárom függvény a fő `TailwindPHP` névtérben található, és a csomag része. A clsx (Luke Edwards) és a tailwind-merge (Dany Castillo) PHP portjai.