Uso

Ver como Markdown Editar en GitHub Documentación de 3843abd

El flujo de trabajo básico consiste en una sola llamada: proporciona a TailwindPHP tu contenido y una configuración CSS opcional; devolverá el CSS de las clases que encuentre. Extrae los nombres de clase del marcado, los compila con el tema resuelto y devuelve solo las utilidades que realmente usas.

PHP

use TailwindPHP\tw;

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

Sin un segundo argumento, generate() usa un @import "tailwindcss" predeterminado (tema + Preflight + utilidades). Pasa una cadena CSS o una matriz para personalizarlo.

Análisis del contenido

TailwindPHP encuentra los nombres de clase leyendo los atributos class y className del contenido. Para inspeccionar lo que extrae, usa tw::extractCandidates():

PHP

use TailwindPHP\tw;

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

Se analizan los atributos class y className, y la lista devuelta elimina duplicados. Los candidatos arbitrarios (como [mask-type:luminance] o bg-[#1da1f2]) se extraen del mismo modo y se compilan si son válidos. Todo lo que aparece aquí es exactamente lo que generate() compilará.

Formatos de entrada

Todos los métodos estáticos aceptan las mismas tres formas de entrada:

Formato	Firma	Cuándo usarlo
Solo cadena	`tw::generate($content)`	Tema predeterminado, sin personalización.
Cadena + cadena CSS	`tw::generate($content, $css)`	Ajustes rápidos del tema o directivas en línea.
Matriz	`tw::generate(['content' => ..., 'css' => ...])`	Necesitas `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,
]);

El formato de matriz es el único que acepta opciones. Además de css y minify, acepta importPaths (consulta Imports), cache y cacheTtl (consulta Caching).

Compilador reutilizable

Compilar muchos fragmentos con la misma configuración —un bucle de solicitudes, un conjunto de plantillas, una biblioteca de componentes— es más eficiente con una sola instancia del compilador. tw::compile() resuelve el tema y el sistema de diseño una vez y luego los reutiliza:

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

El compilador también ofrece inspección de propiedades (properties(), computedProperties(), value(), computedValue()) y accesores del tema (colors(), breakpoints(), spacing()). Consulta la API completa para ver todos los métodos.

Configurar la entrada CSS

La mayor parte de la potencia de TailwindPHP reside en la cadena CSS que pasas como configuración. Continúa con:

Theme — variables y espacios de nombres de @theme.
Directives — @apply, @utility, @layer, @custom-variant.
Imports — @import, módulos virtuales, importPaths y Preflight.
@source — controla qué archivos y clases se analizan.