Začínáme

Instalace

composer require tailwindphp/tailwindphp

TailwindPHP vyžaduje PHP 8.2 nebo novější s rozšířeními ctype a mbstring a také Composer. Obě rozšíření jsou součástí většiny sestavení PHP a oficiálních obrazů Docker; composer.json je zatím neuvádí (#11), takže sestavení bez nich balíček nainstaluje, ale při spuštění selže. Není potřeba závislost Node.js, krok sestavení ani npm v obrazu Docker nebo v CI. Stačí composer require a zavolat API.

Vygenerujte své první 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() prohledá značky, extrahuje nalezené názvy tříd a vygeneruje pouze CSS potřebné pro tyto třídy — nic navíc. Pokud nepředáte druhý argument, použije výchozí @import "tailwindcss", který načte motiv, Preflight a vrstvu utilit.

Přizpůsobení pomocí řetězce CSS

Jako druhý argument předejte vstupní řetězec CSS a přidejte @theme proměnné, vlastní pravidla nebo direktivy. Nové hodnoty motivu se automaticky stanou utilitami:

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ý seznam jmenných prostorů motivu najdete v části Motiv.

Vstupní pole

Pro cokoli složitějšího než jednořádkový zápis předejte pole s klíči content a css. Zde můžete definovat komponenty pomocí @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;
        }
    ',
]);

Pole přijímá také minify, importPaths, cache a cacheTtl. Formáty vstupu najdete v části Použití a direktivy @apply, @theme, @utility a další v části Direktivy.

Zápis do souboru

generate() vrací řetězec, takže šablonu stylů zapíšete jedním řádkem:

use TailwindPHP\tw;

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

Pro sestavení založená na souborech, která prohledávají adresář šablon, a pro režim sledování použijte místo toho CLI. Používá stejné volby sestavení @tailwindcss/cli, ale obsah nyní prohledává jinak než Tailwind; na stránce CLI najdete seznam prohledávaných položek.

Minifikace pro produkční prostředí

Předáním minify => true zkomprimujete výstup během generování, případně zavolejte tw::minify() nad existujícím řetězcem:

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

Minifikátor odstraňuje komentáře, slučuje bílé znaky, zkracuje hexadecimální barvy (#ffffff na #fff) a odstraňuje jednotky u nulových hodnot (0px na 0). Možnosti ukládání do mezipaměti najdete v části Ukládání do mezipaměti a minifikace.

Další kroky

• Použití — postup generování, prohledávání obsahu a vstupní formáty.
• Utility tříd — cn(), merge(), join() a variants().
• Doplňky — typografie, formuláře a vlastní doplňky.
• API — kompletní rozhraní tw a opakovaně použitelné instance kompilátoru.
• CLI — sestavení ze souborů a sledování změn bez Node.js.