Використання
Основний процес складається з одного виклику: передайте 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, який ви передаєте як конфігурацію. Продовжте з такими розділами: