Lietošana

Skatīt kā Markdown Rediģēt vietnē GitHub Dokumentācija vietnē 3843abd

Galvenā darbplūsma ir viens izsaukums: padodiet TailwindPHP savu saturu un izvēles konfigurāciju CSS, un tā atgriezīs CSS atrastajām klasēm. Klašu nosaukumi tiek izgūti no marķējuma, kompilēti, izmantojot atrisināto motīvu, un rezultātā ir iekļautas tikai tās utilītas, kuras patiešām izmantojat.

PHP

use TailwindPHP\tw;

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

Ja otrais arguments nav norādīts, generate() izmanto noklusējuma @import "tailwindcss" (motīvs + Preflight + utilītas). Lai pielāgotu iestatījumus, padodiet CSS virkni vai masīvu.

Satura skenēšana

TailwindPHP atrod klašu nosaukumus, nolasot satura atribūtus class un className. Lai pārbaudītu izgūtos datus, izmantojiet tw::extractCandidates():

PHP

use TailwindPHP\tw;

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

Tiek skenēti gan atribūti class, gan className, un atgrieztais saraksts tiek atbrīvots no dublikātiem. Tāpat tiek izgūti patvaļīgi kandidāti, piemēram, [mask-type:luminance] vai bg-[#1da1f2], un, ja tie ir derīgi, tiek kompilēti. Viss šeit redzamais ir tieši tas, ko kompilēs generate().

Ievades formāti

Katra statiskā metode pieņem vienu no trim ievades formām:

Formāts	Signatūra	Izmantojiet, ja
Tikai virkne	`tw::generate($content)`	Vajadzīgs noklusējuma motīvs bez pielāgojumiem.
Virkne + CSS virkne	`tw::generate($content, $css)`	Vajadzīgi ātri motīva pielāgojumi vai iekļautas direktīvas.
Masīvs	`tw::generate(['content' => ..., 'css' => ...])`	Nepieciešams `minify`, `importPaths` vai `cache`.

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

Opcijas var izmantot tikai masīva formā. Papildus css un minify tā pieņem importPaths (skatiet sadaļu Importi), cache un cacheTtl (skatiet sadaļu Kešatmiņa).

Atkārtoti izmantojams kompilators

Daudzu fragmentu kompilēšana ar vienu un to pašu konfigurāciju — pieprasījumu ciklam, veidņu kopai vai komponentu bibliotēkai — ir efektīvāka, izmantojot vienu kompilatora instanci. tw::compile() vienreiz atrisina motīvu un dizaina sistēmu, pēc tam tos izmanto atkārtoti:

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

Kompilators nodrošina arī rekvizītu pārbaudi (properties(), computedProperties(), value(), computedValue()) un motīva piekļuves metodes (colors(), breakpoints(), spacing()). Pilnu visu metožu sarakstu skatiet sadaļā API.

Ievades CSS konfigurēšana

Lielākā daļa TailwindPHP iespēju ir pieejama konfigurācijai padodamajā virknē CSS. Turpiniet ar:

Motīvs — @theme mainīgie un nosaukumvietas.
Direktīvas — @apply, @utility, @layer, @custom-variant.
Importi — @import, virtuālie moduļi, importPaths un Preflight.
@source — nosaka, kuriem failiem tiek meklētas klases.