Začíname

Inštalácia

composer require tailwindphp/tailwindphp

TailwindPHP potrebuje PHP 8.2 alebo novší s rozšíreniami ctype a mbstring a tiež Composer. Obe rozšírenia sú súčasťou väčšiny zostavení PHP a oficiálnych obrazov Docker; composer.json ich zatiaľ neuvádza (#11), takže zostavenie bez nich balík nainštaluje, no pri spustení zlyhá. Nie je potrebná závislosť Node.js, krok zostavenia ani npm v obraze Docker či v CI. Stačí composer require a zavolať API.

Vytvorte svoj prvý 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() skenuje značkovanie, získava názvy nájdených tried a vytvára iba CSS potrebné pre tieto triedy — nič navyše. Ak nezadáte druhý argument, použije predvolený @import "tailwindcss", ktorý načíta tému, Preflight a vrstvu nástrojov.

Prispôsobenie pomocou reťazca CSS

Ako druhý argument odovzdajte vstupný reťazec CSS, ktorým pridáte premenné @theme, vlastné pravidlá alebo direktívy. Nové hodnoty témy sa automaticky stanú nástrojmi:

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)

Úplný zoznam menných priestorov tém nájdete v časti Téma.

Vstup vo forme poľa

Ak potrebujete viac než jeden riadok, odovzdajte pole s kľúčmi content a css. Tu môžete definovať komponenty pomocou @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 poľa prijíma aj minify, importPaths, cache a cacheTtl. Formáty vstupu nájdete v časti Použitie a položky @apply, @theme, @utility a ďalšie v časti Direktívy.

Zápis do súboru

generate() vracia reťazec, takže zápis štýlového hárka zvládnete jediným riadkom:

use TailwindPHP\tw;

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

Pri zostavovaní zo súborov, ktoré skenuje adresár so šablónami, a v režime sledovania použite namiesto toho CLI. Prijíma rovnaké možnosti zostavenia ako @tailwindcss/cli, no jeho skenovanie obsahu sa dnes líši od skenovania Tailwind; na stránke CLI je uvedený zoznam skenovaných položiek.

Minimalizácia pre produkčné nasadenie

Odovzdajte minify => true, ak chcete výstup pri generovaní komprimovať, alebo zavolajte tw::minify() pre existujúci reťazec:

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

Minimalizátor odstraňuje komentáre, zlučuje medzery, skracuje hexadecimálne farby (#ffffff na #fff) a odstraňuje jednotky z nulových hodnôt (0px na 0). Možnosti ukladania do vyrovnávacej pamäte nájdete v časti Ukladanie do vyrovnávacej pamäte a minimalizácia.

Ďalšie kroky

• Použitie — postup generovania, skenovanie obsahu a vstupné formáty.
• Triedové nástroje — cn(), merge(), join() a variants().
• Pluginy — typografia, formuláre a vlastné pluginy.
• API — úplné rozhranie tw a opakovane použiteľné inštancie kompilátora.
• CLI — zostavovanie zo súborov a sledovanie zmien bez Node.js.