API

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

A teljes statikus felület egyetlen osztályon érhető el: TailwindPHP\tw (a belső Tailwind osztály aliasa). Minden metódus statikusan hívható, a vizsgálati metódusok (properties, computedProperties, value, computedValue) pedig elfogadják az oldal alján ismertetett bemeneti formátumokat.

Ha ugyanazzal a CSS konfigurációval ismételten dolgozik, hívja meg egyszer a tw::compile() metódust, majd használja újra a visszaadott TailwindCompiler példányt.

PHP

use TailwindPHP\tw;

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

tw::generate()

PHP

public static function generate(string|array $input, string $css = '@import "tailwindcss";'): string

Feldolgozza a tartalmat, kinyeri az osztályjelölteket, majd visszaadja a létrehozott CSS értéket. Az alapértelmezett $css érték @import "tailwindcss";, amely betölti a témát, az előfeldolgozást és a segédosztályokat. Visszatérési érték: string.

PHP

use TailwindPHP\tw;

// String input
$css = tw::generate('<div class="flex p-4">');

// String with custom CSS
$css = tw::generate('<div class="flex bg-brand">', '@import "tailwindcss"; @theme { --color-brand: #3b82f6; }');

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

A tömbös forma a következő kulcsokat fogadja el:

Kulcs	Típus	Cél
`content`	`string`	Beolvasandó tartalom az osztályjelöltek kereséséhez (kötelező)
`css`	`string`	Bemeneti CSS a Tailwind direktívákkal (alapértelmezés: `@import "tailwindcss";`)
`minify`	`bool`	Kimenet minifikálása (alapértelmezés: `false`)
`importPaths`	`string \| array \| callable \| null`	A CSS betöltése a fájlrendszerből teljes `@import` feloldással — lásd: CSS importálása
`cache`	`bool \| string`	Fájlgyorsítótárazás bekapcsolása — lásd: Gyorsítótárazás
`cacheTtl`	`int`	Gyorsítótár élettartama másodpercben

tw::compile()

PHP

public static function compile(string $css = '@import "tailwindcss";', array $options = []): TailwindCompiler

Létrehoz egy újrahasználható TailwindCompiler példányt a megadott CSS konfigurációhoz kötve. A feldolgozás és a tervezőrendszer felépítése egyszer történik meg, ezért ez a hatékony megoldás, ha sok különböző tartalmi karakterlánchoz kell CSS értéket generálni. Az generate() metódussal több hívás eredményét gyűjtheti egyetlen stíluslapba, vagy használja a generateExact() metódust az oldalanként különálló kimenethez. Visszatérési érték: TailwindCompiler.

PHP

use TailwindPHP\tw;

// Default Tailwind
$compiler = tw::compile();

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

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

A $options tömb a következőket fogadja el:

Beállítás	Típus	Cél
`stateCacheFile`	`string`	Egy PHP fájl elérési útja, amely kérések és folyamatok között megőrzi a fordító inicializálási állapotát — lásd: A fordítóállapot gyorsítótára
`polyfills`	`int`	A kibocsátandó tartalékértékek: `TailwindPHP\POLYFILL_AT_PROPERTY` bitmaszkja (az `@layer properties` alapértékeket ad a `@property` változókhoz) és `TailwindPHP\POLYFILL_COLOR_MIX` (statikus színtartalékok a `color-mix()` előtt). Alapértelmezés: `POLYFILL_ALL`; az `POLYFILL_NONE` mindkettőt letiltja
`importSearchPaths`	`array<string>`	A `@import` fájlrendszerből való feloldásakor keresendő könyvtárak

PHP

use TailwindPHP\tw;
use const TailwindPHP\POLYFILL_NONE;

// Cache construction state on disk, reused by later requests
$compiler = tw::compile('@import "tailwindcss";', [
    'stateCacheFile' => __DIR__ . '/cache/tailwind-state.php',
]);

// Plain output without fallbacks, e.g. for CSS modules
$compiler = tw::compile('@import "tailwindcss/utilities.css";', [
    'polyfills' => POLYFILL_NONE,
]);
$compiler->generate('<div class="bg-red-500/50">');
// .bg-red-500\/50 { background-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); }
// (with the default, a `#fb2c3680` fallback comes first and color-mix() moves into @supports)

A teljes példánymetódus-felületért lásd: TailwindCompiler-példánymetódusok.

tw::properties()

PHP

public static function properties(string|array $input, string $css = '@import "tailwindcss";'): array

Egy osztály nyers CSS tulajdonságait adja vissza, a CSS változók feloldása nélkül. Visszatérési érték: array<string, string> (tulajdonságnév → érték).

PHP

use TailwindPHP\tw;

tw::properties('p-4');
// ['padding' => 'calc(var(--spacing) * 4)']

tw::properties(['flex', 'items-center', 'p-4']);
// ['display' => 'flex', 'align-items' => 'center', 'padding' => 'calc(var(--spacing) * 4)']

tw::computedProperties()

PHP

public static function computedProperties(string|array $input, string $css = '@import "tailwindcss";'): array

A properties() metódushoz hasonló, de minden CSS változót konkrét értékre old fel. Visszatérési érték: array<string, string>.

PHP

use TailwindPHP\tw;

tw::computedProperties('p-4');
// ['padding' => '1rem']

tw::computedProperties('text-blue-500');
// ['color' => 'oklch(62.3% .214 259.815)']

tw::computedProperties(['flex', 'items-center', 'gap-4']);
// ['display' => 'flex', 'align-items' => 'center', 'gap' => '1rem']

tw::value()

PHP

public static function value(string|array $input, string $css = '@import "tailwindcss";'): ?string

Egyetlen segédosztály nyers értékét adja vissza. Visszatérési érték: ?string — null, ha a segédosztály nem található.

PHP

use TailwindPHP\tw;

tw::value('p-4');           // 'calc(var(--spacing) * 4)'
tw::value('text-blue-500'); // 'var(--color-blue-500)'

tw::computedValue()

PHP

public static function computedValue(string|array $input, string $css = '@import "tailwindcss";'): ?string

Egyetlen segédosztály feloldott értékét adja vissza. Visszatérési érték: ?string — null, ha a segédosztály nem található.

PHP

use TailwindPHP\tw;

tw::computedValue('p-4');           // '1rem'
tw::computedValue('text-blue-500'); // 'oklch(62.3% .214 259.815)'
tw::computedValue('gap-4');         // '1rem'

tw::extractCandidates()

PHP

public static function extractCandidates(string $html): array

Tartalomból nyeri ki a Tailwind osztályneveket (az class és className attribútumokat is beolvassa). Visszatérési érték: array<string>.

PHP

use TailwindPHP\tw;

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

tw::extractCandidatesFromStrings()

PHP

public static function extractCandidatesFromStrings(string $source): array

A forráskód minden egyszeres vagy dupla idézőjelek közé tett karakterláncából osztálynévjelölteket nyer ki. Olyan sablonokhoz használható, amelyek class attribútumok helyett változókban állítják össze az osztálylistákat. Minden karakterláncot szóközök mentén bont fel, és megtartja az osztálynévnek látszó tokeneket. Visszatérési érték: array<string>.

PHP

use TailwindPHP\tw;

$classes = tw::extractCandidatesFromStrings('<?php $wrap = \'p-4 sm:flex\'; $title = "hello world"; ?>');
// ['p-4', 'sm:flex', 'hello', 'world']

$css = tw::compile()->css($classes);

A közönséges szavak is átmennek az ellenőrzésen (a fenti hello, world); fordításukkor nem keletkezik semmi, hacsak nem segédosztály-nevek. Az eredményt adja át a css() metódusnak, mert az generate() csak az class attribútumokat olvassa.

tw::cssMap()

PHP

public static function cssMap(string $css = '@import "tailwindcss";'): array

Fordított leképezést készít a CSS deklarációktól a segédosztályokig; meglévő CSS értékek Tailwind osztályokká alakításához hasznos. A kulcsok feloldott változókat tartalmazó "property: value" karakterláncok (a több tulajdonságú segédosztályokhoz "prop: value; prop: value" kulcs is tartozik), az értékek pedig osztálynevek. Visszatérési érték: array<string, string>.

PHP

use TailwindPHP\tw;

$map = tw::cssMap();
$map['display: flex'];       // 'flex'
$map['padding: 1rem'];       // 'p-4'
$map['text-align: center'];  // 'text-center'
$map['color: #fff'];         // 'text-white'

A leképezés gyakori segédosztályok rögzített listáját fedi le (megjelenítés, pozíció, flexbox, tipográfia, térköz- és méretezési lépések, szegélyek, fekete/fehér/átlátszó színek és hasonlók), nem az összes segédosztályt és téma színét. A $css argumentum módosítja ezeknek a segédosztályoknak a feloldott értékeit, az egyéni témajelölők (például --color-brand) azonban nem adnak hozzá új bejegyzéseket.

tw::minify()

PHP

public static function minify(string $css): string

Egy tetszőleges CSS karakterláncot minifikál: eltávolítja a megjegyzéseket, összevonja a szóközöket, rövidíti a hexadecimális színeket (#ffffff → #fff), elhagyja a nullaértékek mértékegységeit (0px → 0) és még sok mást. Visszatérési érték: string.

A CSS által előállított TailwindPHP esetében inkább a minify beállítást (tw::generate(['minify' => true])) vagy a fordítói metódusok $minify paraméterét használja. Ez az eljárás szerializálás közben minifikál, gyorsabb, és megőrzi azokat az alárendelt :not() választókat, amelyeket a karakterlánc-alapú feldolgozás összevon.

PHP

use TailwindPHP\tw;

$css = tw::generate('<div class="flex p-4">');
$minified = tw::minify($css);

Az optimalizálások teljes listájáért lásd: Gyorsítótárazás és minifikálás.

tw::clearCache()

PHP

public static function clearCache(string|bool|null $cache = true): int

Törli a gyorsítótárazott CSS fájlokat. A true értéket megadva (vagy elhagyva) az alapértelmezett gyorsítótár-könyvtárat használja; egyéni könyvtárhoz adjon meg egy elérési utat. Visszatérési érték: int — a törölt fájlok száma.

PHP

use TailwindPHP\tw;

tw::clearCache();                  // default directory
tw::clearCache('/path/to/cache');  // custom directory

Különálló TailwindPHP\clearCache() függvény is rendelkezésre áll.

tw::colors()

PHP

public static function colors(string $css = '@import "tailwindcss";'): array

A téma összes színértékét adja vissza. Visszatérési érték: array<string, string> (színnév → számított érték).

PHP

use TailwindPHP\tw;

tw::colors();
// ['red-500' => 'oklch(63.7% .237 25.331)', 'blue-500' => 'oklch(62.3% .214 259.815)', ...]

// With a custom theme
tw::colors('@import "tailwindcss"; @theme { --color-brand: #3b82f6; }');
// [..., 'brand' => '#3b82f6']

tw::breakpoints()

PHP

public static function breakpoints(string $css = '@import "tailwindcss";'): array

A téma összes töréspontértékét adja vissza. Visszatérési érték: array<string, string> (töréspont neve → érték).

PHP

use TailwindPHP\tw;

tw::breakpoints();
// ['sm' => '40rem', 'md' => '48rem', 'lg' => '64rem', 'xl' => '80rem', '2xl' => '96rem']

tw::breakpoints('@import "tailwindcss"; @theme { --breakpoint-xs: 20rem; }');
// ['sm' => '40rem', ..., '2xl' => '96rem', 'xs' => '20rem']

tw::spacing()

PHP

public static function spacing(string $css = '@import "tailwindcss";'): array

A téma egyéni térközértékeit adja vissza. Visszatérési érték: array<string, string> (térköz neve → érték).

PHP

use TailwindPHP\tw;

// TailwindCSS 4 uses a single --spacing base value rather than a --spacing-* namespace.
// This returns any custom --spacing-* values defined in the theme.
tw::spacing('@import "tailwindcss"; @theme { --spacing-huge: 10rem; }');
// ['huge' => '10rem']

Bemeneti formátumok

A vizsgálati metódusok (generate, properties, computedProperties, value, computedValue) háromféle bemenetet fogadnak el:

Formátum	Példa
Csak karakterlánc	`tw::generate('<div class="flex">')`
Karakterlánc + CSS karakterlánc	`tw::generate('<div class="flex">', '@import "tailwindcss"; @theme { ... }')`
Tömb `content`-mal (+ opcionális `css`-gyel)	`tw::generate(['content' => '<div class="flex">', 'css' => '@import "tailwindcss";'])`

PHP

use TailwindPHP\tw;

// Format 1: string only
tw::properties('p-4');

// Format 2: string + CSS
tw::properties('bg-brand', '@import "tailwindcss"; @theme { --color-brand: #3b82f6; }');

// Format 3: array
tw::properties(['content' => 'p-4', 'css' => '@import "tailwindcss";']);

TailwindCompiler-példánymetódusok

A tw::compile() által visszaadott objektum a statikus osztályéval megegyező vizsgálati felületet biztosít, az általa lefordított CSS konfigurációhoz kötve. Használatával elkerülhető a téma ismételt feldolgozása minden híváskor.

PHP

public function generate(string $content, bool $minify = false): string
public function css(array $candidates, bool $minify = false): string
public function generateExact(string $content, bool $minify = false): string
public function cssExact(array $candidates, bool $minify = false): string
public function extractCandidates(string $html): array
public function extractCandidatesFromStrings(string $source): array
public function properties(string|array $utilities): array
public function computedProperties(string|array $utilities): array
public function value(string $utility): ?string
public function computedValue(string $utility): ?string
public function minify(string $css): string
public function colors(): array
public function breakpoints(): array
public function spacing(): array

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

$compiler->properties('bg-brand');          // ['background-color' => 'var(--color-brand)']
$compiler->computedProperties('bg-brand');   // ['background-color' => '#3b82f6']
$compiler->value('bg-brand');                // 'var(--color-brand)'
$compiler->computedValue('bg-brand');        // '#3b82f6'

$minified = $compiler->minify($css);

$compiler->colors();        // all color values
$compiler->breakpoints();   // all breakpoint values
$compiler->spacing();       // custom spacing values

Halmozott vagy pontos generálás

A generate() és a css() halmozza a jelölteket: minden hívás hozzáadja a saját jelöltjeit a fordító bővülő készletéhez, a visszaadott stíluslap pedig az addig látott összes elemet tartalmazza. Ez egyetlen, sablonokon át fokozatosan felépített stíluslaphoz illik.

A generateExact() és a cssExact() minden híváskor pontosan a megadott tartalmat vagy jelölteket fordítja le, a hívások közötti átvitel nélkül, miközben továbbra is újrahasználja a fordító feldolgozott tervezőrendszerét. A kimenet megegyezik az azonos tartalom friss tw::generate() fordításának eredményével. Ezzel lehet a leggyorsabban oldalankénti CSS értéket készíteni egy hosszú élettartamú fordítóval:

PHP

use TailwindPHP\tw;

$compiler = tw::compile($themeCss);

foreach ($pages as $slug => $html) {
    $perPageCss[$slug] = $compiler->generateExact($html, true);
}

Mind a négy metódus fogad egy opcionális $minify jelzőt, amellyel szerializálás közben minifikált CSS kimenetet készít — ez bájtról bájtra megegyezik a tw::generate(['minify' => true]) eredményével, és kevesebb erőforrást igényel, mint a formázott kimenet utólagos minifikálása.

Speciális vizsgálók

A lefordított állapot közvetlen vizsgálatához:

PHP

public function getTheme(): Theme
public function getDesignSystem(): object
public function getCompiled(): array

PHP

$compiler->getTheme();        // Theme object with resolved values
$compiler->getDesignSystem(); // Design system: utilities, variants, etc.
$compiler->getCompiled();     // Raw compiled state array

Ezek belső struktúrákat adnak vissza; a tartalmukért lásd: Architektúra.

Alacsonyabb szintű függvények

A tw osztály a TailwindPHP névtér függvényeit fogja össze. Akkor hasznosak, ha TailwindCompiler helyett a nyers fordítási eredményre van szükség:

Függvény	Cél
`compile(string $css, array $options = []): array`	Feldolgozza és lefordítja a CSS elemet. Visszaadja a `build` elemet (halmozás) és a jelölteket fogadó `buildExact` lezárásokat, valamint egy opcionális `$minify` jelzőt, továbbá a `sources`, `root`, `features` és `designSystem` elemeket. Ugyanazokat a beállításokat fogadja el, mint a `tw::compile()`, kivéve a következőt: `stateCacheFile`
`StateCache\compileCssCached(string $css, string $cacheFile, array $options = []): array`	`compile()` a tartós fordítóállapot-gyorsítótárral
`parseCssState()`, `finalizeCssState()`, `compileParsed()`	A feldolgozás két lépése (szerializálható állapot, majd az abból újraépített lezárások), valamint a végső összeállítás, amelyet az `compileCssCached()` használ. Az `parseCss()` és `compileAst()` ennek egylépéses megfelelői

PHP

use function TailwindPHP\compile;

$compiled = compile('@import "tailwindcss";');
$css = $compiled['build'](['flex', 'p-4'], true); // minified

Gyorsítótárazás

A tw::generate() lemezre gyorsítótárazhatja a lefordított CSS elemeket, így az azonos bemeneteknél nincs szükség újrafordításra.

Beállítás	Típus	Alapértelmezés	Cél
`cache`	`bool \| string`	`false`	A `true` bekapcsolja az alapértelmezett könyvtárat; elérési út megadásával ott tárolja a gyorsítótárat
`cacheTtl`	`int`	nincs	Gyorsítótár élettartama másodpercben; a lejárt bejegyzések újrafordulnak

PHP

use TailwindPHP\tw;

// Default directory: sys_get_temp_dir() . '/tailwindphp'
$css = tw::generate([
    'content' => '<div class="flex p-4">',
    'cache' => true,
]);

// Custom directory + TTL
$css = tw::generate([
    'content' => '<div class="flex p-4">',
    'cache' => '/path/to/cache',
    'cacheTtl' => 3600, // expire after 1 hour
]);

A gyorsítótár kulcsa a tartalomból, a CSS konfigurációból és a minify beállításból származik, ezért a különböző bemenetek külön gyorsítótárfájlokat hoznak létre. A bejegyzéseket a tw::clearCache() vagy a különálló TailwindPHP\clearCache() függvény segítségével törölheti.

Részletesebb útmutatóért lásd: Gyorsítótárazás és minifikálás.