
# 排版插件

`@tailwindcss/typography` 是官方排版插件的 1:1 PHP 移植版。它添加 `prose` 类及其修饰符，可为渲染后的 HTML 内容块应用易读的排版默认样式，涵盖标题、段落、列表、引用块、代码、表格等，无需逐个元素手动设置样式。

## 用法

使用 `@plugin` 加载插件并导入工具层，然后将 `prose` 应用到包裹内容的容器上：

```php
use TailwindPHP\tw;

$css = tw::generate(
    '<article class="prose prose-lg"><h1>Title</h1><p>Body text…</p></article>',
    '@plugin "@tailwindcss/typography"; @import "tailwindcss/utilities.css";'
);
```

生成的 `.prose` 规则会定义 `--tw-prose-*` 个自定义属性（`--tw-prose-body`、`--tw-prose-headings`、`--tw-prose-links`、`--tw-prose-code`、`--tw-prose-quotes` 等），并通过这些属性为后代元素设置样式。

## 类

### 尺寸

尺寸修饰符会缩放整套字号比例。它们需与基础 `prose` 类一起使用：

| 类 | 用途 |
|-------|---------|
| `prose` | 默认尺寸 |
| `prose-sm` | 小 |
| `prose-base` | 基础 |
| `prose-lg` | 大 |
| `prose-xl` | 特大 |
| `prose-2xl` | 2× 特大 |

```html
<article class="prose prose-xl">…</article>
```

### 颜色主题

颜色修饰符会替换正文、标题和边框所用的灰度色阶：

| 类 | 主题 |
|-------|-------|
| `prose-slate` | 石板灰 |
| `prose-gray` | 灰色 |
| `prose-zinc` | 锌色 |
| `prose-neutral` | 中性色 |
| `prose-stone` | 石色 |

### 反转

`prose-invert` 会翻转调色板，以适用于深色背景。可自由搭配尺寸和颜色修饰符：

```html
<article class="prose prose-lg prose-slate prose-invert">…</article>
```

## 选项

### `className`

默认情况下，插件会生成 `prose` 类。设置 `className` 可为其重命名，修饰符也会沿用新名称（`markdown`、`markdown-lg`、`markdown-invert`、…）。设置后，不会生成 `prose` 类：

```php
$css = tw::generate(
    '<article class="markdown markdown-lg">…</article>',
    '
        @plugin "@tailwindcss/typography" {
            className: "markdown";
        }
        @import "tailwindcss/utilities.css";
    '
);
```

## 说明

诸如 `prose-headings:underline` 或 `prose-a:text-blue-600` 的元素修饰符已注册，但在当前版本中，编译结果不会包含元素选择器，因此工具会应用于整个 `prose` 容器，而不是其中的标题或链接（[#10](https://github.com/inline0/tailwindphp/issues/10)）。修复发布前，请使用自己的 CSS 为这些元素设置样式。

这是一个 TailwindCSS v4 移植版。原插件中某些特定于 v3 的行为——`.dark` 选择器暗色模式和某些元素变体配置格式——在 v4 中的工作方式有所不同，因此不受支持；请改用 `prose-invert` 修饰符和 v4 变体。

有关 `@plugin` 指令和加载详情，请参阅[插件](https://tailwindphp.inline0.dev/zh/docs/plugins)。
