Klassen-Utilities

Attribute in class-Vorlagen zu erstellen, bedeutet, Zeichenfolgen zusammenzufügen, Klassen bedingt umzuschalten und zu verhindern, dass spätere Utilities mit früheren kollidieren (p-2 und p-4 sollten nicht beide bestehen bleiben). In JavaScript ist diese Arbeit auf clsx und tailwind-merge verteilt. TailwindPHP enthält PHP-Portierungen beider Bibliotheken, sodass du dasselbe Verhalten ohne Node.js-Toolchain und ohne zusätzliche Composer-Pakete erhältst.

Drei Funktionen decken das gesamte Spektrum ab: cn() erstellt und löst Konflikte auf, merge() löst nur Konflikte auf und join() fügt nur zusammen.

cn()

Das empfohlene Hilfsprogramm. Es erstellt zuerst bedingt nach clsx-Art und löst dann Konflikte zwischen Tailwind-Klassen mit tailwind-merge auf – die zuletzt angegebene kollidierende Utility gewinnt.

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'

Akzeptierte Argumente

cn() akzeptiert beliebig viele Argumente. Jedes wird nach clsx-Semantik abgeflacht und gefiltert:

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

Komponenten-Muster

cn() macht eine Komponente überschreibbar: Führe die eigenen Klassen der Komponente mit den vom Aufrufer übergebenen zusammen; Konflikte werden zugunsten des Aufrufers aufgelöst.

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>

Für deklarative Komponentenstile mit mehreren Achsen kombinierst du cn() mit variants().

merge()

Nur Konfliktauflösung – keine bedingte Erstellung. Übergib Klassenzeichenfolgen; spätere Klassen überschreiben frühere, wenn sie dieselbe Eigenschaft betreffen. Verwende es, wenn deine Eingabe bereits aus einfachen Zeichenfolgen besteht.

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() ist merge() auf clsx aufgebaut. Verwende merge() direkt nur, wenn du keine bedingte Array-Syntax brauchst.

join()

Einfaches Zusammenfügen ohne Konfliktauflösung. Falsy-Werte werden entfernt, kollidierende Utilities bleiben jedoch alle erhalten. Verwende es, wenn du weißt, dass keine Konflikte auftreten, und die einfachste Option möchtest.

use function TailwindPHP\join;

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

Welche Funktion sollte ich verwenden?

Importe

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

Alle drei befinden sich im Haupt-Namespace TailwindPHP und sind im Paket enthalten. Es sind PHP-Portierungen von clsx (von Luke Edwards) und tailwind-merge (von Dany Castillo).