# 快速入门

## 安装

```bash
composer require tailwindphp/tailwindphp
```

TailwindPHP 需要 PHP 8.2 或更高版本，并需要 `ctype` 和 `mbstring` 扩展，以及 Composer。大多数 PHP 构建和官方 Docker 镜像都包含这两个扩展；`composer.json` 尚未列出它们（[#11](https://github.com/inline0/tailwindphp/issues/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](https://tailwindphp.inline0.dev/zh/docs/usage/imports) 和工具层。

## 通过 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)
```

请参阅 [主题](https://tailwindphp.inline0.dev/zh/docs/usage/theme)，查看完整的主题命名空间列表。

## 数组输入

除了一行内容之外的任何情况，都应传入包含 `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`。请参阅 [用法](https://tailwindphp.inline0.dev/zh/docs/usage)了解输入格式，并参阅 [指令](https://tailwindphp.inline0.dev/zh/docs/usage/directives)了解 `@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](https://tailwindphp.inline0.dev/zh/docs/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`）。缓存选项请参阅 [缓存和压缩](https://tailwindphp.inline0.dev/zh/docs/advanced/caching)。

## 后续步骤

- [用法](https://tailwindphp.inline0.dev/zh/docs/usage)——生成工作流、内容扫描和输入格式。
- [类工具函数](https://tailwindphp.inline0.dev/zh/docs/class-utilities)——`cn()`、`merge()`、`join()` 和 `variants()`。
- [插件](https://tailwindphp.inline0.dev/zh/docs/plugins)——排版、表单和自定义插件。
- [API](https://tailwindphp.inline0.dev/zh/docs/api)——完整的 `tw` 接口以及可复用的编译器实例。
- [CLI](https://tailwindphp.inline0.dev/zh/docs/cli)——无需 Node.js 的文件构建和监听构建。