Початок роботи

Встановлення

composer require tailwindphp/tailwindphp

Для TailwindPHP потрібна PHP версії 8.2 або новіша з розширеннями ctype і mbstring, а також Composer. Обидва розширення входять до більшості збірок PHP і офіційних образів Docker; composer.json ще не вказує їх (#11), тому збірка без них встановить пакет, але він не працюватиме під час виконання. Залежність від Node.js не потрібна, етапу збірки немає, і npm не потрібен у вашому образі Docker чи CI. Просто composer require і викличте API.

Згенеруйте свій перший 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() сканує розмітку, витягує знайдені назви класів і створює лише CSS, потрібні цим класам, — нічого зайвого. Якщо не передати другий аргумент, використовується типовий @import "tailwindcss", який додає тему, Preflight і шар утиліт.

Налаштування через рядок CSS

Передайте вхідний рядок CSS другим аргументом, щоб додати змінні @theme, власні правила чи директиви. Нові значення теми автоматично стають утилітами:

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)

Повний перелік просторів імен теми див. у розділі Theme.

Вхідний масив

Для всього, що не вміщується в один рядок, передайте масив із ключами content і css. Тут можна визначати компоненти за допомогою @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;
        }
    ',
]);

Форма масиву також приймає minify, importPaths, cache і cacheTtl. Формати вхідних даних описано в розділі Usage, а @apply, @theme, @utility та інші директиви — у Directives.

Запис у файл

generate() повертає рядок, тож записати таблицю стилів можна одним рядком коду:

use TailwindPHP\tw;

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

Для збірок на основі файлів, які сканують каталог шаблонів, і для режиму спостереження використовуйте CLI. Він приймає ті самі параметри збірки @tailwindcss/cli, але наразі інакше сканує вміст, ніж Tailwind; перелік того, що саме сканується, наведено на сторінці CLI.

Мінімізація для продакшену

Передайте minify => true, щоб стиснути результат під час генерації, або викличте tw::minify() для наявного рядка:

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

Мінімізатор видаляє коментарі, стискає пробіли, скорочує шістнадцяткові кольори (#ffffff до #fff) і прибирає одиниці виміру в нульових значеннях (0px до 0). Параметри кешування описано в розділі Caching & minification.

Наступні кроки

• Usage — робочий процес генерації, сканування вмісту та формати вхідних даних.
• Class utilities — cn(), merge(), join() і variants().
• Plugins — типографіка, форми та власні плагіни.
• API — повний набір можливостей tw і повторно використовувані екземпляри компілятора.
• CLI — збірки на основі файлів і в режимі спостереження без Node.js.