# Klassehjælpefunktioner

Opbygning af `class`-attributter i skabeloner betyder, at strenge skal sammenkædes, klasser skal skiftes ud fra betingelser, og senere hjælpeklasser skal forhindres i at komme i konflikt med tidligere (`p-2` og `p-4` bør ikke begge bevares). I JavaScript er arbejdet fordelt mellem [clsx](https://github.com/lukeed/clsx) og [tailwind-merge](https://github.com/dcastil/tailwind-merge). TailwindPHP leverer PHP-porte af begge, så du får samme funktionalitet uden Node.js-værktøjskæde og uden ekstra Composer-pakker.

Tre funktioner dækker hele behovet: `cn()` opbygger og løser konflikter, `merge()` løser kun konflikter, og `join()` sammenkæder kun.

## cn()

Det anbefalede hjælpeværktøj. Først opbygger det betinget på clsx-måden, derefter løser det Tailwind-konflikter med tailwind-merge — så den sidst angivne hjælpeklasse vinder, når der er en konflikt.

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

### Accepterede argumenter

`cn()` accepterer et vilkårligt antal argumenter. Hvert argument flades ud og filtreres efter clsx-semantik:

| Argument | Funktion |
|----------|----------|
| `string` | Tilføjes som det er. |
| `int` / `float` | Konverteres til en streng og tilføjes. |
| Sekventielt array | Hvert element behandles rekursivt. |
| `key => bool`-array | Hver nøgle tilføjes, hvis dens værdi er sand. |
| `null`, `false`, `0`, `''` | Ignoreres. |

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

### Komponentmønster

`cn()` gør en komponent mulig at tilsidesætte: flet komponentens egne klasser med dem, der sendes ind af kaldende kode, så konflikter løses til fordel for den kaldende kode.

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

Til deklarative komponentstile med flere akser skal du kombinere `cn()` med [variants()](https://tailwindphp.inline0.dev/da/docs/class-utilities/variants).

## merge()

Løser kun konflikter — ingen betinget opbygning. Angiv klassestrenge; senere klasser tilsidesætter tidligere, når de gælder den samme egenskab. Brug den, når dit input allerede består af almindelige strenge.

```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()` er `merge()` bygget oven på clsx, så vælg `merge()` direkte, når du ikke har brug for betinget arraysyntaks.

## join()

Enkel sammenkædning uden konfliktløsning. Falske værdier fjernes, men alle hjælpeklasser i konflikt bevares. Brug den, når du ved, at der ikke er konflikter, og ønsker den billigste mulighed.

```php
use function TailwindPHP\join;

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

## Hvilken skal jeg bruge?

| Funktion | Opbygger (betingelser, arrays) | Løser konflikter | Brug når |
|----------|:---:|:---:|----------|
| `cn()`    | ja | ja | Standardvalget — til opbygning af klassestrenge, der kan være i konflikt. |
| `merge()` | nej  | ja | Inputtet består af almindelige strenge; du skal kun løse konflikter. |
| `join()`  | ja | nej  | Du ved, at der ikke er konflikter, og ønsker mindst muligt arbejde. |

## Importer

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

Alle tre findes i hovednavnerummet `TailwindPHP` og følger med pakken. De er PHP-porte af clsx (af Luke Edwards) og tailwind-merge (af Dany Castillo).