Начало работы

Установка

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.