快速入门

以 Markdown 格式查看在 GitHub 上编辑文档位置 3843abd

安装

命令行

composer require tailwindphp/tailwindphp

TailwindPHP 需要 PHP 8.2 或更高版本，并需要 ctype 和 mbstring 扩展，以及 Composer。大多数 PHP 构建和官方 Docker 镜像都包含这两个扩展；composer.json 尚未列出它们（#11），因此缺少这些扩展的构建虽然会安装软件包，却会在运行时失败。无需依赖 Node.js，无需构建步骤，也无需在你的 Docker 镜像或 CI 中安装 npm。只需 composer require 并调用 API。

生成你的第一个 CSS

PHP

<?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 变量、自定义规则或指令。新的主题值会自动成为工具类：

PHP

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 定义组件：

PHP

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() 返回字符串，因此只需一行代码即可写入样式表：

PHP

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()：

PHP

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 的文件构建和监听构建。