Към съдържанието

Употреба

Преглед като Markdown Редактиране в GitHub Документация за 3843abd

Основният работен процес се свежда до едно извикване: подайте на TailwindPHP съдържанието си и незадължителна конфигурация CSS, а то връща CSS за откритите класове. Имената на класовете се извличат от маркировката, компилират се спрямо разрешената тема и резултатът съдържа само помощните класове, които действително използвате.

PHP
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():

PHP
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.
PHP
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 (вижте Imports), cache и cacheTtl (вижте Caching).

Компилатор за повторна употреба

Компилирането на много фрагменти с една и съща конфигурация — цикъл от заявки, пакет шаблони или библиотека с компоненти — е по-ефективно с един екземпляр на компилатора. tw::compile() разрешава темата и системата за дизайн веднъж и след това ги използва повторно:

PHP
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, който подавате като конфигурация. Продължете с:

  • Theme — променливи @theme и пространства от имена.
  • Directives — @apply, @utility, @layer, @custom-variant.
  • Imports — @import, виртуални модули, importPaths и Preflight.
  • @source — контролирайте кои файлове и класове се сканират.