Использование
Основной сценарий — один вызов: передайте TailwindPHP содержимое и необязательную конфигурацию CSS, чтобы получить CSS для найденных классов. Имена классов извлекаются из разметки, компилируются с разрешённой темой, а результат содержит только используемые вами утилиты.
use TailwindPHP\tw;
$css = tw::generate('<div class="flex items-center p-4 bg-blue-500">Hello</div>');
Если второй аргумент не задан, generate() использует конфигурацию @import "tailwindcss" по умолчанию (тема + Preflight + утилиты). Для настройки передайте строку CSS или массив.
Сканирование содержимого
TailwindPHP находит имена классов, читая атрибуты class и className в содержимом. Чтобы посмотреть, что извлечено, используйте tw::extractCandidates():
use TailwindPHP\tw;
tw::extractCandidates('<div class="flex p-4" className="bg-blue-500">');
// ['flex', 'p-4', 'bg-blue-500']
Сканируются оба атрибута — class и className, а возвращаемый список очищается от дубликатов. Кандидаты произвольного вида (например, [mask-type:luminance] или bg-[#1da1f2]) извлекаются тем же способом и компилируются, если они допустимы. Всё, что показано здесь, generate() скомпилирует.
Форматы ввода
Каждый статический метод принимает данные в одной из трёх одинаковых форм:
| Формат | Сигнатура | Когда использовать |
|---|---|---|
| Только строка | tw::generate($content) |
Тема по умолчанию, без настройки. |
| Строка + строка CSS | tw::generate($content, $css) |
Быстрая настройка темы или директивы в строке. |
| Массив | tw::generate(['content' => ..., 'css' => ...]) |
Когда нужны minify, importPaths или cache. |
use TailwindPHP\tw;
// Format 1: String only
tw::generate('<div class="flex">');
// Format 2: String + CSS string
tw::generate('<div class="flex">', '@import "tailwindcss"; @theme { --color-brand: #3b82f6; }');
// Format 3: Array with content, css, and options
tw::generate([
'content' => '<div class="flex p-4">',
'css' => '@import "tailwindcss";',
'minify' => true,
]);
Параметры принимает только форма массива. Помимо css и minify, она поддерживает importPaths (см. раздел Импорт), cache и cacheTtl (см. раздел Кэширование).
Повторное использование компилятора
Компилировать множество фрагментов с одной конфигурацией — цикл запросов, набор шаблонов или библиотеку компонентов — выгоднее с одним экземпляром компилятора. tw::compile() разрешает тему и систему дизайна один раз, а затем использует их повторно:
use TailwindPHP\tw;
$compiler = tw::compile('@import "tailwindcss"; @theme { --color-brand: #3b82f6; }');
$css = $compiler->generate('<div class="flex p-4 bg-brand">');
$candidates = $compiler->extractCandidates('<div class="flex p-4 bg-brand">');
$minified = $compiler->minify($css);
Компилятор также предоставляет просмотр свойств (properties(), computedProperties(), value(), computedValue()) и методы доступа к теме (colors(), breakpoints(), spacing()). Полный список методов см. в API.
Настройка входного CSS
Большая часть возможностей TailwindPHP задаётся строкой CSS, передаваемой в качестве конфигурации. Продолжите чтение: