Kullanım

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

Temel iş akışı tek bir çağrıdan oluşur: içeriğinizi ve isteğe bağlı CSS yapılandırmasını TailwindPHP öğesine verin; bulunan sınıflara ait CSS çıktısını döndürür. Sınıf adları işaretlemeden çıkarılır, çözümlenmiş temaya göre derlenir ve sonuç yalnızca gerçekten kullandığınız yardımcı sınıfları içerir.

PHP

use TailwindPHP\tw;

$css = tw::generate('<div class="flex items-center p-4 bg-blue-500">Hello</div>');

İkinci bir argüman verilmezse generate() varsayılan bir @import "tailwindcss" (tema + Preflight + yardımcı sınıflar) kullanır. Özelleştirmek için bir CSS dizesi veya dizi iletin.

İçerik tarama

TailwindPHP, içeriğinizdeki class ve className özniteliklerini okuyarak sınıf adlarını bulur. Hangi adların çıkarıldığını incelemek için tw::extractCandidates() kullanın:

PHP

use TailwindPHP\tw;

tw::extractCandidates('<div class="flex p-4" className="bg-blue-500">');
// ['flex', 'p-4', 'bg-blue-500']

Hem class hem de className öznitelikleri taranır ve döndürülen listedeki yinelenenler kaldırılır. Keyfi adaylar ([mask-type:luminance] veya bg-[#1da1f2] gibi) aynı şekilde çıkarılır ve geçerliyse derlenir. Burada görünen her şey, generate() öğesinin derleyeceği içerikle birebir aynıdır.

Girdi biçimleri

Her statik yöntem aynı üç girdi biçimini kabul eder:

Biçim	İmza	Kullanım
Yalnızca dize	`tw::generate($content)`	Varsayılan tema, özelleştirme yok.
Dize + CSS dizesi	`tw::generate($content, $css)`	Hızlı tema ayarları veya satır içi yönergeler.
Dizi	`tw::generate(['content' => ..., 'css' => ...])`	`minify`, `importPaths` veya `cache` gerekiyor.

PHP

use TailwindPHP\tw;

// Format 1: String only
tw::generate('<div class="flex">');

// Format 2: String + CSS string
tw::generate('<div class="flex">', '@import "tailwindcss"; @theme { --color-brand: #3b82f6; }');

// Format 3: Array with content, css, and options
tw::generate([
    'content' => '<div class="flex p-4">',
    'css'     => '@import "tailwindcss";',
    'minify'  => true,
]);

Seçenekleri yalnızca dizi biçimi alır. css ve minify öğelerine ek olarak importPaths (bkz. İçe Aktarımlar), cache ve cacheTtl (bkz. Önbelleğe Alma) kabul edilir.

Yeniden kullanılabilir derleyici

Aynı yapılandırmayla çok sayıda parçayı derlemek (istek döngüsü, şablon grubu veya bileşen kitaplığı gibi) tek bir derleyici örneğiyle daha verimlidir. tw::compile() tema ve tasarım sistemini bir kez çözümler, ardından bunları yeniden kullanır:

PHP

use TailwindPHP\tw;

$compiler = tw::compile('@import "tailwindcss"; @theme { --color-brand: #3b82f6; }');

$css        = $compiler->generate('<div class="flex p-4 bg-brand">');
$candidates = $compiler->extractCandidates('<div class="flex p-4 bg-brand">');
$minified   = $compiler->minify($css);

Derleyici ayrıca özellik inceleme (properties(), computedProperties(), value(), computedValue()) ve tema erişimcileri (colors(), breakpoints(), spacing()) sunar. Her yöntemin açıklaması için tam API bölümüne bakın.

Girdiyi CSS ile yapılandırma

TailwindPHP gücünün çoğunu yapılandırma olarak ilettiğiniz CSS dizesinden alır. Şunlarla devam edin:

Tema — @theme değişkenleri ve ad alanları.
Yönergeler — @apply, @utility, @layer, @custom-variant.
İçe Aktarımlar — @import, sanal modüller, importPaths ve Preflight.
@source — hangi dosyaların ve sınıfların taranacağını denetleyin.