Gebruik

Bekijken als Markdown Bewerken op GitHub Documentatie op 3843abd

De kernworkflow bestaat uit één aanroep: geef TailwindPHP je content en optionele configuratie voor CSS, en de CSS voor de gevonden klassen worden geretourneerd. Klassennamen worden uit de opmaak gehaald en gecompileerd op basis van het opgeloste thema. Het resultaat bevat alleen de hulpprogramma's die je daadwerkelijk gebruikt.

PHP

use TailwindPHP\tw;

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

Zonder tweede argument gebruikt generate() een standaard-@import "tailwindcss" (thema + Preflight + hulpprogramma's). Geef een tekenreeks of array van CSS mee om dit aan te passen.

Content scannen

TailwindPHP zoekt klassennamen door de attributen class en className in je content te lezen. Gebruik tw::extractCandidates() om te bekijken wat er wordt opgehaald:

PHP

use TailwindPHP\tw;

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

Zowel de attributen class als className worden gescand en de geretourneerde lijst wordt ontdubbeld. Willekeurige kandidaten (zoals [mask-type:luminance] of bg-[#1da1f2]) worden op dezelfde manier opgehaald en gecompileerd als ze geldig zijn. Alles wat hier verschijnt, is precies wat generate() compileert.

Invoerformaten

Elke statische methode accepteert dezelfde drie invoervormen:

Indeling	Signatuur	Gebruik wanneer
Alleen tekenreeks	`tw::generate($content)`	Je het standaardthema zonder aanpassingen wilt gebruiken.
Tekenreeks + tekenreeks van CSS	`tw::generate($content, $css)`	Je snel het thema wilt aanpassen of directives inline wilt opnemen.
Array	`tw::generate(['content' => ..., 'css' => ...])`	Je `minify`, `importPaths` of `cache` nodig hebt.

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

Alleen de arrayvorm accepteert opties. Naast css en minify accepteert deze importPaths (zie Imports), cache en cacheTtl (zie Caching).

Herbruikbare compiler

Als je veel fragmenten compileert met dezelfde configuratie — een verzoeklus, een reeks sjablonen of een componentbibliotheek — is één compilerinstantie efficiënter. tw::compile() verwerkt het thema en het ontwerpsysteem één keer en hergebruikt ze daarna:

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

De compiler biedt ook inspectie van eigenschappen (properties(), computedProperties(), value(), computedValue()) en thema-accessors (colors(), breakpoints(), spacing()). Raadpleeg de volledige API voor alle methoden.

De invoer CSS configureren

De meeste mogelijkheden van TailwindPHP zitten in de tekenreeks CSS die je als configuratie meegeeft. Lees verder bij:

Thema — @theme-variabelen en namespaces.
Directives — @apply, @utility, @layer en @custom-variant.
Imports — @import, virtuele modules, importPaths en Preflight.
@source — bepaal welke bestanden en klassen worden gescand.