Primeros pasos

Instalación

composer require tailwindphp/tailwindphp

TailwindPHP requiere PHP 8.2 o posterior con las extensiones ctype y mbstring, y Composer. La mayoría de las compilaciones de PHP y las imágenes oficiales de Docker incluyen ambas extensiones. composer.json aún no las incluye en su lista (#11), por lo que una compilación sin ellas instala el paquete, pero falla en tiempo de ejecución. No hay dependencia de Node.js, paso de compilación ni npm en su imagen de Docker o CI. Solo composer require y llame a API.

Genere su primer CSS

<?php

require __DIR__ . '/vendor/autoload.php';

use TailwindPHP\tw;

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

generate() analiza el marcado, extrae los nombres de clase que encuentra y genera solo el CSS que necesitan esas clases, sin nada más. Si no se proporciona un segundo argumento, usa un @import "tailwindcss" predeterminado que incluye el tema, Preflight y la capa de utilidades.

Personalizar mediante una cadena CSS

Pase una cadena de entrada CSS como segundo argumento para añadir variables @theme, reglas personalizadas o directivas. Los nuevos valores del tema se convierten automáticamente en utilidades:

use TailwindPHP\tw;

$css = tw::generate(
    '<div class="bg-brand p-4">Hello</div>',
    '@import "tailwindcss"; @theme { --color-brand: #3b82f6; }'
);
// .bg-brand now resolves to var(--color-brand)

Consulte Tema para ver todos los espacios de nombres del tema.

Entrada en forma de matriz

Para todo lo que vaya más allá de una sola línea, pase una matriz con las claves content y css. Aquí puede definir componentes con @apply:

use TailwindPHP\tw;

$css = tw::generate([
    'content' => '<div class="flex p-4 btn">Hello</div>',
    'css' => '
        @import "tailwindcss";

        @theme {
            --color-brand: #3b82f6;
            --font-heading: "Inter", sans-serif;
        }

        .btn {
            @apply px-4 py-2 rounded-lg bg-brand text-white;
        }
    ',
]);

La forma de matriz también acepta minify, importPaths, cache y cacheTtl. Consulte Uso para ver los formatos de entrada y Directivas para @apply, @theme, @utility y otras.

Escribir en un archivo

generate() devuelve una cadena, así que escribir una hoja de estilos requiere una sola línea:

use TailwindPHP\tw;

file_put_contents('dist/styles.css', tw::generate([
    'content' => file_get_contents('templates/page.html'),
    'css' => '@import "tailwindcss";',
]));

Para compilaciones basadas en archivos que analizan un directorio de plantillas y para el modo de observación, use CLI. Acepta las opciones de compilación @tailwindcss/cli, pero hoy analiza el contenido de forma distinta a Tailwind; la página CLI enumera lo que analiza.

Minimizar para producción

Pase minify => true para comprimir el resultado durante la generación, o llame a tw::minify() con una cadena existente:

use TailwindPHP\tw;

// Minify during generation
$css = tw::generate([
    'content' => '<div class="flex p-4">Hello</div>',
    'minify' => true,
]);

// Or minify separately
$css = tw::generate('<div class="flex p-4">Hello</div>');
$minified = tw::minify($css);

El minimizador elimina comentarios, reduce los espacios en blanco, acorta los colores hexadecimales (#ffffff a #fff) y elimina las unidades de los valores cero (0px a 0). Consulte Caché y minimización para ver las opciones de caché.

Pasos siguientes

• Uso: el flujo de generación, el análisis de contenido y los formatos de entrada.
• Utilidades de clase: cn(), merge(), join() y variants().
• Complementos: tipografía, formularios y complementos personalizados.
• API: toda la superficie de tw e instancias reutilizables del compilador.
• CLI: compilaciones basadas en archivos y en modo de observación, sin Node.js.