Utilizzo

Visualizza come Markdown Modifica su GitHub Documentazione di 3843abd

Il flusso di lavoro principale consiste in una sola chiamata: fornisci a TailwindPHP i tuoi contenuti e l'eventuale configurazione CSS; restituisce le CSS delle classi trovate. I nomi delle classi vengono estratti dal markup, compilati con il tema risolto e il risultato contiene solo le utility effettivamente utilizzate.

PHP

use TailwindPHP\tw;

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

Senza un secondo argomento, generate() usa un @import "tailwindcss" predefinito (tema + Preflight + utility). Passa una stringa CSS o un array per personalizzarlo.

Analisi dei contenuti

TailwindPHP trova i nomi delle classi leggendo gli attributi class e className nei tuoi contenuti. Per controllare cosa viene estratto, usa tw::extractCandidates():

PHP

use TailwindPHP\tw;

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

Vengono analizzati entrambi gli attributi class e className e l'elenco restituito non contiene duplicati. I candidati arbitrari (come [mask-type:luminance] o bg-[#1da1f2]) vengono estratti allo stesso modo e compilati se validi. Tutto ciò che compare qui è esattamente ciò che generate() compilerà.

Formati di input

Ogni metodo statico accetta le stesse tre forme di input:

Formato	Firma	Quando usarlo
Solo stringa	`tw::generate($content)`	Tema predefinito, senza personalizzazioni.
Stringa + stringa CSS	`tw::generate($content, $css)`	Modifiche rapide al tema o direttive inline.
Array	`tw::generate(['content' => ..., 'css' => ...])`	Quando servono `minify`, `importPaths` o `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,
]);

Solo la forma array accetta opzioni. Oltre a css e minify, accetta importPaths (vedi Importazioni), cache e cacheTtl (vedi Memorizzazione nella cache).

Compilatore riutilizzabile

Compilare molti frammenti con la stessa configurazione — un ciclo di richieste, un gruppo di modelli o una libreria di componenti — è più efficiente con una singola istanza del compilatore. tw::compile() risolve il tema e il sistema di progettazione una volta, poi li riutilizza:

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

Il compilatore espone anche funzioni di ispezione delle proprietà (properties(), computedProperties(), value(), computedValue()) e funzioni di accesso al tema (colors(), breakpoints(), spacing()). Consulta il API completo per tutti i metodi.

Configurare l'input CSS

La maggior parte delle funzionalità di TailwindPHP si trova nella stringa CSS che passi come configurazione. Continua con:

Tema — @theme variabili e namespace.
Direttive — @apply, @utility, @layer, @custom-variant.
Importazioni — @import, moduli virtuali, importPaths e Preflight.
@source — controlla quali file e classi vengono analizzati.