Brug

Vis som Markdown Rediger på GitHub Dokumentation hos 3843abd

Kernearbejdsgangen er ét kald: giv TailwindPHP dit indhold samt valgfri CSS-konfiguration, så returnerer det CSS for de klasser, det finder. Klassenavne udtrækkes fra markuppen, kompileres med det løste tema, og resultatet indeholder kun de hjælpeklasser, du faktisk bruger.

PHP

use TailwindPHP\tw;

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

Uden et andet argument bruger generate() en standard-@import "tailwindcss" (tema + Preflight + hjælpeklasser). Angiv en CSS-streng eller et array for at tilpasse den.

Indholdsscanning

TailwindPHP finder klassenavne ved at læse attributterne class og className i dit indhold. Brug tw::extractCandidates() for at se, hvad der udtrækkes:

PHP

use TailwindPHP\tw;

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

Både attributterne class og className scannes, og den returnerede liste deduplikeres. Vilkårlige kandidater (som [mask-type:luminance] eller bg-[#1da1f2]) udtrækkes på samme måde og kompileres, hvis de er gyldige. Alt, hvad der vises her, er præcis det, generate() kompilerer.

Inputformater

Alle statiske metoder accepterer de samme tre inputformer:

Format	Signatur	Brug når
Kun streng	`tw::generate($content)`	Standardtema, ingen tilpasning.
Streng + CSS-streng	`tw::generate($content, $css)`	Hurtige temaændringer eller direktiver direkte i strengen.
Array	`tw::generate(['content' => ..., 'css' => ...])`	Du har brug for `minify`, `importPaths` eller `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,
]);

Arrayformen er den eneste, der tager indstillinger. Ud over css og minify accepterer den importPaths (se Imports), cache og cacheTtl (se Caching).

Genbrugelig compiler

Det er billigere at kompilere mange fragmenter med den samme konfiguration — en anmodningsløkke, en samling skabeloner eller et komponentbibliotek — med én enkelt compilerinstans. tw::compile() løser temaet og designsystemet én gang og genbruger dem derefter:

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

Compileren giver også adgang til egenskabsinspektion (properties(), computedProperties(), value(), computedValue()) og temametoder (colors(), breakpoints(), spacing()). Se den fulde API for alle metoder.

Konfiguration af inputtet CSS

Det meste af TailwindPHPs funktionalitet findes i strengen CSS, du angiver som konfiguration. Fortsæt med:

Tema — @theme variabler og navnerum.
Direktiver — @apply, @utility, @layer, @custom-variant.
Importer — @import, virtuelle moduler, importPaths og Preflight.
@source — styr, hvilke filer og klasser der scannes.