Használat

Megtekintés Markdownként Szerkesztés itt: GitHub Dokumentáció itt: 3843abd

Az alapfolyamat egyetlen hívásból áll: adja át a TailwindPHP-nak a tartalmat és az opcionális CSS konfigurációt, a rendszer pedig visszaadja a megtalált osztályokhoz tartozó CSS-t. Az osztályneveket a jelölésből nyeri ki, a feloldott témával fordítja le, az eredmény pedig csak a ténylegesen használt segédosztályokat tartalmazza.

PHP

use TailwindPHP\tw;

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

Második argumentum nélkül a generate() az alapértelmezett @import "tailwindcss"-et használja (téma + Preflight + segédosztályok). Testreszabáshoz adjon meg egy CSS karakterláncot vagy tömböt.

Tartalom vizsgálata

A TailwindPHP a tartalomban lévő class és className attribútumok olvasásával találja meg az osztályneveket. A kinyert elemek ellenőrzéséhez használja a tw::extractCandidates()-t:

PHP

use TailwindPHP\tw;

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

A class és a className attribútumot is átvizsgálja, a visszaadott listából pedig eltávolítja az ismétlődéseket. A tetszőleges jelölteket (például [mask-type:luminance] vagy bg-[#1da1f2]) is ugyanígy nyeri ki, majd érvényesség esetén lefordítja. A lista tartalma pontosan az, amit a generate() le fog fordítani.

Bemeneti formátumok

Minden statikus metódus ugyanazt a három bemeneti formát fogadja el:

Formátum	Szignatúra	Mikor használja
Csak karakterlánc	`tw::generate($content)`	Alapértelmezett téma, testreszabás nélkül.
Karakterlánc + CSS karakterlánc	`tw::generate($content, $css)`	Gyors témamódosításokhoz vagy direktívák közvetlen megadásához.
Tömb	`tw::generate(['content' => ..., 'css' => ...])`	Ha `minify`-ra, `importPaths`-ra vagy `cache`-ra van szüksége.

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,
]);

A beállításokat csak a tömbös forma fogadja el. A css és a minify mellett támogatja a importPaths-t is (lásd: Imports), továbbá a cache és a cacheTtl értéket (lásd: Caching).

Újrahasználható fordító

Ha sok töredéket kell ugyanazzal a konfigurációval lefordítani — például egy kérésekből álló ciklust, sablonköteget vagy komponenskönyvtárat —, egyetlen fordítópéldánnyal olcsóbban megteheti. A tw::compile() egyszer feloldja a témát és a tervezési rendszert, majd újra felhasználja őket:

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);

A fordító tulajdonságvizsgálati funkciókat (properties(), computedProperties(), value(), computedValue()) és témalekérőket (colors(), breakpoints(), spacing()) is biztosít. Az összes metódusért tekintse meg a teljes API dokumentációt.

A bemeneti CSS konfigurálása

A TailwindPHP legtöbb lehetősége az argumentumként átadott CSS karakterláncban rejlik. Folytassa a következő részekkel:

Theme — @theme változók és névterek.
Directives — @apply, @utility, @layer és @custom-variant.
Imports — @import, virtuális modulok, importPaths és Preflight.
@source — szabályozza, mely fájlokat és osztályokat vizsgálja a rendszer.