Sınıf Yardımcıları

Markdown olarak görüntüle GitHub üzerinde düzenle Dokümantasyon: 3843abd

Şablonlarda class öznitelikleri oluşturmak; dizgeleri birleştirmek, koşullara göre sınıfları açıp kapatmak ve sonraki yardımcı sınıfların önceki sınıflarla çakışmasını önlemek anlamına gelir (p-2 ile p-4 aynı anda kalmamalıdır). JavaScript içinde bu işler clsx ve tailwind-merge arasında bölünür. TailwindPHP her ikisinin de PHP uyarlamalarını sunar; böylece Node.js araç zinciri veya ek Composer paketleri olmadan aynı davranışı elde edersiniz.

Üç işlev farklı ihtiyaçları karşılar: cn() oluşturur ve çakışmaları giderir, merge() yalnızca çakışmaları giderir, join() ise yalnızca birleştirir.

cn()

Önerilen yardımcı programdır. Önce clsx tarzı koşullu oluşturma işlemini yapar, ardından tailwind-merge ile Tailwind çakışmalarını çözer; böylece çakışan yardımcı programlardan sonuncusu kazanır.

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'

Kabul edilen bağımsız değişkenler

cn() istenen sayıda bağımsız değişkeni kabul eder. Her biri clsx semantiğiyle düzleştirilir ve filtrelenir:

Bağımsız değişken	Davranış
`string`	Olduğu gibi eklenir.
`int` / `float`	Dizgeye dönüştürülüp eklenir.
Sıralı dizi	Her öğe özyinelemeli olarak işlenir.
`key => bool` dizisi	Değeri doğru olan her anahtar eklenir.
`null`, `false`, `0`, `''`	Yok sayılır.

PHP

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

Bileşen kalıbı

cn(), bir bileşenin üzerine yazılabilmesini sağlar: bileşenin kendi sınıflarını çağıranın ilettikleriyle birleştirin; çakışmalar çağıranın lehine çözülür.

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>

Bildirimsel, çok eksenli bileşen stilleri için cn() ile variants() öğelerini birlikte kullanın.

merge()

Yalnızca çakışma çözümü sunar; koşullu oluşturma yapmaz. Sınıf dizgelerini iletin; aynı özelliği hedefleyen sonraki sınıflar öncekileri geçersiz kılar. Girdiniz zaten düz dizgelerden oluşuyorsa bunu kullanın.

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(), clsx üzerine merge() olarak oluşturulmuştur; bu nedenle koşullu dizi sözdizimine ihtiyacınız yoksa doğrudan yalnızca merge() kullanın.

join()

Çakışma çözümü olmadan basit birleştirme yapar. Yanlış değerler çıkarılır, ancak çakışan yardımcı programların tümü korunur. Çakışma olmadığından eminseniz ve en düşük maliyeti istiyorsanız kullanın.

PHP

use function TailwindPHP\join;

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

Hangisini kullanmalıyım?

İşlev	Oluşturur (koşullar, diziler)	Çakışmaları çözer	Şu durumda kullanın
`cn()`	evet	evet	Varsayılan tercih — çakışabilecek sınıf dizgeleri oluştururken.
`merge()`	hayır	evet	Girdi düz dizgelerden oluşuyorsa ve yalnızca çakışmaları gidermeniz gerekiyorsa.
`join()`	evet	hayır	Çakışma olmadığından eminseniz ve en az işlemi istiyorsanız.

İçe aktarmalar

PHP

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

Üçü de ana TailwindPHP ad alanında yer alır ve paketle birlikte sunulur. Luke Edwards'ın clsx uyarlamaları ve Dany Castillo'nun tailwind-merge uyarlamasıdırlar: PHP.