Първи стъпки

Инсталиране

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)

Вижте Тема за пълния набор от пространства на имената на темата.

Вход във вид на масив

За по-сложни случаи подайте масив с ключове 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. Вижте Употреба за форматите на входа и Директиви за @apply, @theme, @utility и други.

Записване във файл

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). Вижте Кеширане и минифициране за опциите за кеширане.

Следващи стъпки

• Употреба — работният процес за генериране, сканирането на съдържанието и форматите на входа.
• Помощни класове — cn(), merge(), join() и variants().
• Плъгини — типография, формуляри и персонализирани плъгини.
• API — пълната повърхност на tw и повторно използваеми екземпляри на компилатора.
• CLI — компилации от файлове и в режим на наблюдение без Node.js.