Klassehulpfuncties

Bekijken als Markdown Bewerken op GitHub Documentatie op 3843abd

class-attributen opbouwen in templates betekent strings samenvoegen, classes onder voorwaarden in- en uitschakelen en voorkomen dat latere hulpfuncties botsen met eerdere (p-2 en p-4 mogen niet allebei behouden blijven). In JavaScript is dat werk verdeeld over clsx en tailwind-merge. TailwindPHP levert PHP-ports van beide, zodat je hetzelfde gedrag krijgt zonder Node.js-toolchain en zonder extra Composer-pakketten.

Drie functies bestrijken het hele spectrum: cn() bouwt op en lost conflicten op, merge() lost alleen conflicten op en join() voegt alleen samen.

cn()

De aanbevolen hulpfunctie. Deze voert eerst conditionele opbouw volgens clsx-stijl uit en lost daarna Tailwind-conflicten op met tailwind-merge — de laatste conflicterende hulpfunctie wint dus.

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'

Geaccepteerde argumenten

cn() accepteert een willekeurig aantal argumenten. Elk argument wordt afgevlakt en gefilterd volgens de semantiek van clsx:

Argument	Gedrag
`string`	Wordt ongewijzigd toegevoegd.
`int` / `float`	Wordt naar een string omgezet en toegevoegd.
Sequentiële array	Elk element wordt recursief verwerkt.
`key => bool`-array	Elke sleutel wordt toegevoegd als de waarde ervan waarheidsgetrouw is.
`null`, `false`, `0`, `''`	Worden genegeerd.

PHP

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

Componentpatroon

cn() maakt een component overschrijfbaar: voeg de eigen classes van de component samen met wat de aanroeper meegeeft; bij conflicten wint de aanroeper.

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>

Combineer voor declaratieve componentstijlen met meerdere assen cn() met variants().

merge()

Alleen conflictoplossing — geen conditionele opbouw. Geef classstrings door; latere classes overschrijven eerdere wanneer ze dezelfde eigenschap instellen. Gebruik dit wanneer je invoer al uit gewone strings bestaat.

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() is merge() opgebouwd boven op clsx. Gebruik merge() rechtstreeks alleen wanneer je de conditionele arraysyntaxis niet nodig hebt.

join()

Eenvoudig samenvoegen zonder conflictoplossing. Waarden die niet waarheidsgetrouw zijn, worden weggelaten, maar conflicterende hulpfuncties blijven allemaal behouden. Gebruik dit wanneer je weet dat er geen conflicten zijn en de goedkoopste optie wilt.

PHP

use function TailwindPHP\join;

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

Welke moet ik gebruiken?

Functie	Bouwt op (voorwaarden, arrays)	Lost conflicten op	Gebruik wanneer
`cn()`	ja	ja	Standaardkeuze — voor het opbouwen van classstrings die conflicten kunnen bevatten.
`merge()`	nee	ja	De invoer bestaat uit gewone strings; je hoeft alleen conflicten op te lossen.
`join()`	ja	nee	Je weet dat er geen conflicten zijn en wilt zo weinig mogelijk werk.

Imports

PHP

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

Alle drie bevinden zich in de hoofdnamespace TailwindPHP en zijn gebundeld met het pakket. Het zijn PHP-ports van clsx (door Luke Edwards) en tailwind-merge (door Dany Castillo).