Βοηθητικές κλάσεις

Η δημιουργία attributes class σε templates σημαίνει συνένωση συμβολοσειρών, εναλλαγή κλάσεων υπό συνθήκες και αποτροπή συγκρούσεων των μεταγενέστερων utilities με τα προηγούμενα (τα p-2 και p-4 δεν πρέπει να συνυπάρχουν). Στο JavaScript αυτή η εργασία κατανέμεται στα clsx και tailwind-merge. Το TailwindPHP περιλαμβάνει PHP υλοποιήσεις και των δύο, ώστε να έχετε την ίδια συμπεριφορά χωρίς toolchain Node.js και χωρίς πρόσθετα πακέτα Composer.

Τρεις συναρτήσεις καλύπτουν όλο το φάσμα: η cn() δημιουργεί και επιλύει συγκρούσεις, η merge() επιλύει μόνο συγκρούσεις και η join() απλώς συνενώνει.

cn()

Η προτεινόμενη utility. Εκτελεί πρώτα τη δημιουργία υπό συνθήκες τύπου clsx και έπειτα επιλύει συγκρούσεις Tailwind με tailwind-merge — έτσι υπερισχύει η τελευταία utility που συγκρούεται.

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'

Αποδεκτά ορίσματα

Η cn() δέχεται οποιονδήποτε αριθμό ορισμάτων. Καθένα αναπτύσσεται και φιλτράρεται με τη σημασιολογία του clsx:

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

Μοτίβο στοιχείου

Η cn() επιτρέπει την παράκαμψη των κλάσεων ενός στοιχείου: συγχωνεύστε τις δικές του κλάσεις με όσες περνά ο καλών και οι συγκρούσεις επιλύονται υπέρ του καλούντος.

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>

Για δηλωτικά στυλ στοιχείων με πολλούς άξονες, συνδυάστε την cn() με την variants().

merge()

Μόνο επίλυση συγκρούσεων — χωρίς δημιουργία υπό συνθήκες. Περάστε συμβολοσειρές κλάσεων· οι μεταγενέστερες κλάσεις υπερισχύουν των προηγούμενων όταν αφορούν την ίδια ιδιότητα. Χρησιμοποιήστε την όταν η είσοδός σας αποτελείται ήδη από απλές συμβολοσειρές.

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() είναι σύνθεση της merge() πάνω στο clsx, οπότε χρησιμοποιήστε απευθείας την merge() μόνο όταν δεν χρειάζεστε τη σύνταξη πινάκων υπό συνθήκες.

join()

Απλή συνένωση χωρίς επίλυση συγκρούσεων. Οι ψευδείς τιμές απορρίπτονται, αλλά διατηρούνται όλες οι αντικρουόμενες utilities. Χρησιμοποιήστε την όταν γνωρίζετε ότι δεν υπάρχουν συγκρούσεις και θέλετε την πιο οικονομική επιλογή.

use function TailwindPHP\join;

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

Ποια να χρησιμοποιήσω;

Εισαγωγές

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

Και οι τρεις βρίσκονται στον κύριο χώρο ονομάτων TailwindPHP και περιλαμβάνονται στο πακέτο. Είναι PHP υλοποιήσεις του clsx (του Luke Edwards) και του tailwind-merge (του Dany Castillo).