
# Klasių priemonės

Kuriant `class` atributus šablonuose, reikia jungti eilutes, perjungti klases pagal sąlygas ir užtikrinti, kad vėliau nurodytos priemonės nesikirstų su ankstesnėmis (`p-2` ir `p-4` neturėtų likti abi). JavaScript šis darbas padalytas tarp [clsx](https://github.com/lukeed/clsx) ir [tailwind-merge](https://github.com/dcastil/tailwind-merge). TailwindPHP pateikia abiejų PHP atitikmenis, todėl gaunate tokį patį veikimą be Node.js įrankių grandinės ir papildomų Composer paketų.

Trys funkcijos apima visus poreikius: `cn()` kuria ir sprendžia konfliktus, `merge()` tik sprendžia konfliktus, o `join()` tik sujungia eilutes.

## cn()

Rekomenduojama priemonė. Pirmiausia ji atlieka sąlyginį kūrimą pagal clsx veikimo principą, tada išsprendžia Tailwind konfliktus naudodama tailwind-merge — laimi paskutinė konfliktuojanti utility klasė.

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

### Priimami argumentai

`cn()` priima bet kokį argumentų skaičių. Kiekvienas argumentas išskaidomas ir perfiltruojamas pagal clsx semantiką:

| Argumentas | Veikimas |
|----------|----------|
| `string` | Pridedamas nepakeistas. |
| `int` / `float` | Paverčiamas eilute ir pridedamas. |
| Nuoseklus masyvas | Kiekvienas elementas apdorojamas rekursyviai. |
| `key => bool` masyvas | Pridedamas kiekvienas raktas, kurio reikšmė yra teisinga. |
| `null`, `false`, `0`, `''` | Ignoruojami. |

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

### Komponento šablonas

`cn()` leidžia perrašyti komponento klases: sujunkite paties komponento klases su skambinančiojo perduotomis klasėmis, o konfliktai bus sprendžiami skambinančiojo naudai.

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

Deklaratyviems, kelių ašių komponentų stiliams naudokite `cn()` kartu su [variants()](https://tailwindphp.inline0.dev/lt/docs/class-utilities/variants).

## merge()

Tik konfliktų sprendimas — sąlyginio kūrimo nėra. Perduokite klasių eilutes; vėliau nurodytos klasės pakeičia ankstesnes, jei taikomos tai pačiai savybei. Naudokite, kai įvestis jau yra paprastos eilutės.

```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()` yra `merge()`, sudarytas clsx pagrindu, todėl tiesiogiai rinkitės `merge()` tik tada, kai nereikia sąlyginės masyvo sintaksės.

## join()

Paprastas sujungimas be konfliktų sprendimo. Neteisingos reikšmės atmetamos, bet visos konfliktuojančios utility klasės paliekamos. Naudokite, kai žinote, kad konfliktų nėra, ir norite pigiausio varianto.

```php
use function TailwindPHP\join;

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

## Kurią funkciją naudoti?

| Funkcija | Kuria (sąlygas, masyvus) | Sprendžia konfliktus | Kada naudoti |
|----------|:---:|:---:|----------|
| `cn()`    | taip | taip | Numatytoji — klasių eilutėms, kuriose gali kilti konfliktų, kurti. |
| `merge()` | ne  | taip | Įvestis yra paprastos eilutės; reikia tik išspręsti konfliktus. |
| `join()`  | taip | ne  | Žinote, kad konfliktų nėra, ir norite atlikti kuo mažiau darbo. |

## Importai

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

Visos trys yra pagrindinėje `TailwindPHP` vardų srityje ir įtrauktos į paketą. Tai PHP clsx (Luke Edwards) ir tailwind-merge (Dany Castillo) atitikmenys.
