Typographyプラグイン

@tailwindcss/typographyは公式typographyプラグインの1:1のPHP移植版です。proseクラスとその修飾子を追加し、レンダリングされたHTMLのブロックに読みやすいタイポグラフィ既定スタイルを適用します。見出し、段落、リスト、引用、コード、表などを個別にスタイリングする必要はありません。

使い方

@pluginでプラグインを読み込み、utilitiesレイヤーをインポートしてから、コンテンツを囲むコンテナーに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-specific動作（.darkセレクターによるダークモードや、一部の要素バリアント設定形式など）はv4では異なる動作をするため、ここではサポートされていません。代わりにprose-invert修飾子とv4バリアントを使用してください。

@pluginディレクティブと読み込み方法はプラグインを参照してください。