排版插件

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

用法

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

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 类一起使用：

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

颜色主题

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

反转

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

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

选项

className

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

$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）。修复发布前，请使用自己的 CSS 为这些元素设置样式。

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

有关 @plugin 指令和加载详情，请参阅插件。