Primii pași

Instalare

composer require tailwindphp/tailwindphp

TailwindPHP necesită PHP 8.2 sau o versiune ulterioară, cu extensiile ctype și mbstring, precum și Composer. Ambele extensii sunt incluse în majoritatea compilărilor PHP și în imaginile oficiale Docker; composer.json încă nu le listează (#11), așa că o compilare fără ele instalează pachetul, apoi eșuează la execuție. Nu există dependență de Node.js, pas de compilare sau npm în imaginea Docker ori în CI. Trebuie doar să composer require și să apelați API.

Generați primul 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() scanează marcajul, extrage numele claselor găsite și emite doar CSS necesar acelor clase — nimic în plus. Dacă nu este furnizat un al doilea argument, folosește o valoare implicită @import "tailwindcss", care include tema, Preflight și stratul de utilitare.

Personalizare printr-un șir CSS

Transmiteți un șir de intrare CSS ca al doilea argument pentru a adăuga variabile @theme, reguli personalizate sau directive. Noile valori ale temei devin automat utilitare:

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)

Consultați Theme pentru lista completă a spațiilor de nume ale temei.

Intrare de tip tablou

Pentru orice depășește o singură linie, transmiteți un tablou cu cheile content și css. Aici puteți defini componente cu @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;
        }
    ',
]);

Forma de tip tablou acceptă și minify, importPaths, cache și cacheTtl. Consultați Usage pentru formatele de intrare și Directives pentru @apply, @theme, @utility și altele.

Scrierea într-un fișier

generate() returnează un șir, așa că scrierea unei foi de stil se face într-o singură linie:

use TailwindPHP\tw;

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

Pentru compilările bazate pe fișiere care scanează un director de șabloane și pentru modul de urmărire, folosiți în schimb CLI. Acceptă aceleași opțiuni de compilare @tailwindcss/cli, însă scanarea conținutului diferă în prezent de cea a Tailwind; pagina CLI enumeră ce scanează.

Minificare pentru producție

Transmiteți minify => true pentru a comprima rezultatul în timpul generării sau apelați tw::minify() pentru un șir existent:

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

Minificatorul elimină comentariile, comprimă spațiile, scurtează culorile hexazecimale (#ffffff la #fff) și elimină unitățile din valorile zero (0px la 0). Consultați Caching & minification pentru opțiunile de memorare în cache.

Pașii următori

• Usage — fluxul de generare, scanarea conținutului și formatele de intrare.
• Class utilities — cn(), merge(), join() și variants().
• Plugins — tipografie, formulare și pluginuri personalizate.
• API — întreaga interfață tw și instanțe de compilator reutilizabile.
• CLI — compilări bazate pe fișiere și cu urmărire, fără Node.js.