Penggunaan
Alur kerja intinya cukup dengan satu pemanggilan: berikan konten Anda dan konfigurasi CSS opsional kepada TailwindPHP, lalu alat ini mengembalikan CSS untuk kelas yang ditemukan. Nama kelas diekstrak dari markup, dikompilasi berdasarkan tema yang telah diselesaikan, dan hasilnya hanya berisi utilitas yang benar-benar Anda gunakan.
use TailwindPHP\tw;
$css = tw::generate('<div class="flex items-center p-4 bg-blue-500">Hello</div>');
Tanpa argumen kedua, generate() menggunakan @import "tailwindcss" default (tema + Preflight + utilitas). Teruskan string CSS atau array untuk menyesuaikannya.
Pemindaian konten
TailwindPHP menemukan nama kelas dengan membaca atribut class dan className di konten Anda. Untuk memeriksa apa yang ditemukan, gunakan tw::extractCandidates():
use TailwindPHP\tw;
tw::extractCandidates('<div class="flex p-4" className="bg-blue-500">');
// ['flex', 'p-4', 'bg-blue-500']
Atribut class dan className sama-sama dipindai, dan daftar yang dikembalikan dideduplikasi. Kandidat sembarang (seperti [mask-type:luminance] atau bg-[#1da1f2]) diekstrak dengan cara yang sama dan dikompilasi jika valid. Apa pun yang muncul di sini persis sama dengan yang akan dikompilasi oleh generate().
Format input
Setiap metode statis menerima tiga bentuk input yang sama:
| Format | Tanda tangan | Digunakan saat |
|---|---|---|
| String saja | tw::generate($content) |
Tema default, tanpa penyesuaian. |
| String + string CSS | tw::generate($content, $css) |
Penyesuaian tema singkat atau direktif sebaris. |
| Array | tw::generate(['content' => ..., 'css' => ...]) |
Anda memerlukan minify, importPaths, atau cache. |
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,
]);
Bentuk array adalah satu-satunya bentuk yang menerima opsi. Selain css dan minify, bentuk ini menerima importPaths (lihat Impor), cache, dan cacheTtl (lihat Caching).
Compiler yang dapat digunakan kembali
Mengompilasi banyak fragmen dengan konfigurasi yang sama — loop permintaan, sekumpulan templat, pustaka komponen — lebih hemat dengan satu instance compiler. tw::compile() menyelesaikan tema dan sistem desain sekali, lalu menggunakannya kembali:
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);
Compiler juga menyediakan inspeksi properti (properties(), computedProperties(), value(), computedValue()) dan accessor tema (colors(), breakpoints(), spacing()). Lihat API lengkap untuk setiap metode.
Mengonfigurasi input CSS
Sebagian besar kemampuan TailwindPHP terdapat dalam string CSS yang Anda teruskan sebagai konfigurasi. Lanjutkan ke: