Primeiros passos

Instalação

composer require tailwindphp/tailwindphp

TailwindPHP requer PHP 8.2 ou posterior, com as extensões ctype e mbstring, além de Composer. A maioria das compilações PHP e das imagens oficiais Docker inclui ambas as extensões; composer.json ainda não as lista (#11), portanto uma compilação sem elas instala o pacote, mas falha em tempo de execução. Não há dependência de Node.js, etapa de compilação nem npm na sua imagem Docker ou no CI. Basta composer require e chamar o API.

Gere seu primeiro 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() examina a marcação, extrai os nomes das classes encontrados e gera somente o CSS necessário para essas classes — nada além disso. Sem um segundo argumento, usa um @import "tailwindcss" padrão, que inclui o tema, Preflight e a camada de utilitários.

Personalize com uma string CSS

Passe uma string CSS de entrada como segundo argumento para adicionar variáveis @theme, regras personalizadas ou diretivas. Novos valores de tema tornam-se utilitários automaticamente:

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 o conjunto completo de namespaces de tema.

Entrada em array

Para algo além de uma linha, passe um array com as chaves content e css. É aqui que você define componentes com @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;
        }
    ',
]);

O formato de array também aceita minify, importPaths, cache e cacheTtl. Consulte Uso para ver os formatos de entrada e Diretivas para conhecer @apply, @theme, @utility e outras.

Gravar em um arquivo

generate() retorna uma string, então gerar uma folha de estilos é uma operação de uma linha:

use TailwindPHP\tw;

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

Para compilações baseadas em arquivos que examinam um diretório de templates e para o modo de monitoramento, use CLI. Ele aceita as opções de compilação @tailwindcss/cli, mas hoje a varredura de conteúdo difere da de Tailwind; a página CLI lista o que ele examina.

Minificar para produção

Passe minify => true para comprimir a saída durante a geração ou chame tw::minify() em uma string 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);

O minificador remove comentários, reduz espaços em branco, encurta cores hexadecimais (#ffffff para #fff) e remove unidades de valores zero (0px para 0). Consulte Cache e minificação para ver as opções de cache.

Próximas etapas

• Uso — o fluxo de geração, a varredura de conteúdo e os formatos de entrada.
• Utilitários de classes — cn(), merge(), join() e variants().
• Plugins — tipografia, formulários e plugins personalizados.
• API — toda a superfície tw e instâncias de compilador reutilizáveis.
• CLI — compilações baseadas em arquivos e monitoradas, sem Node.js.