Pierwsze kroki

Instalacja

composer require tailwindphp/tailwindphp

TailwindPHP wymaga PHP w wersji 8.2 lub nowszej z rozszerzeniami ctype i mbstring, a także Composer. Oba rozszerzenia są dołączane do większości kompilacji PHP i oficjalnych obrazów Docker; composer.json jeszcze ich nie wymienia (#11), więc kompilacja bez nich zainstaluje pakiet, ale zakończy się błędem w czasie działania. Nie ma zależności Node.js, kroku budowania ani npm w obrazie Docker lub CI. Wystarczy composer require i wywołać API.

Wygeneruj pierwszy 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() skanuje znaczniki, wyodrębnia znalezione nazwy klas i emituje tylko CSS wymagane przez te klasy — nic więcej. Gdy nie podasz drugiego argumentu, używany jest domyślny @import "tailwindcss", który wczytuje motyw, Preflight oraz warstwę narzędzi.

Dostosowywanie za pomocą ciągu CSS

Przekaż wejściowy ciąg CSS jako drugi argument, aby dodać zmienne @theme, własne reguły lub dyrektywy. Nowe wartości motywu automatycznie stają się narzędziami:

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)

Zobacz Motyw, aby poznać wszystkie przestrzenie nazw motywu.

Dane wejściowe w postaci tablicy

W przypadku konfiguracji dłuższej niż jedna linia przekaż tablicę z kluczami content i css. Właśnie tutaj definiuje się komponenty za 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;
        }
    ',
]);

Forma tablicowa obsługuje też minify, importPaths, cache i cacheTtl. Zobacz Użycie, aby poznać formaty danych wejściowych, oraz Dyrektywy, aby dowiedzieć się o @apply, @theme, @utility i innych.

Zapis do pliku

generate() zwraca ciąg, więc zapis arkusza stylów wymaga jednej linijki:

use TailwindPHP\tw;

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

W przypadku kompilacji opartych na plikach, które skanują katalog szablonów, oraz trybu obserwowania użyj zamiast tego CLI. Przyjmuje te same opcje kompilacji @tailwindcss/cli, ale obecnie inaczej skanuje zawartość niż Tailwind; strona CLI zawiera listę skanowanych elementów.

Minifikacja na potrzeby produkcji

Przekaż minify => true, aby skompresować wynik podczas generowania, lub wywołaj tw::minify() na istniejącym ciągu:

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

Minifikator usuwa komentarze, redukuje białe znaki, skraca kolory szesnastkowe (#ffffff do #fff) i usuwa jednostki z wartości zerowych (0px do 0). Zobacz Buforowanie i minifikacja, aby poznać opcje buforowania.

Następne kroki

• Użycie — proces generowania, skanowanie zawartości i formaty danych wejściowych.
• Narzędzia klas — cn(), merge(), join() i variants().
• Wtyczki — typografia, formularze i własne wtyczki.
• API — pełny interfejs tw i możliwość ponownego użycia instancji kompilatora.
• CLI — kompilacje oparte na plikach i tryb obserwowania bez Node.js.