できない.dev

Tailwind CSS の `prose` クラス(typography プラグイン)が適用されない

`prose` は Tailwind 本体ではなく @tailwindcss/typography プラグインで提供される。
プラグイン未導入、tailwind.config の plugins 未登録、Tailwind v4 での `@plugin` 漏れ、content スキャン対象外のいずれかで剥がれる。
v3 と v4 で導入方法が違う点に注意する。

#tailwindcss#typography#prose#plugin

公開:

要約

prose は Tailwind 本体ではなく @tailwindcss/typography プラグインで定義されるクラス。
プラグインが未導入か、設定ファイルへの登録漏れ、または content スキャン対象外で purge されているのが主原因。
Tailwind v3 と v4 で導入方法が違う点に注意する。

よくある原因

  1. プラグイン未導入: @tailwindcss/typographynpm install していない
  2. plugins 配列に未登録 (v3): tailwind.config.js の plugins に追加し忘れている
  3. @plugin 漏れ (v4): CSS-first 設定で @plugin ディレクティブを書いていない
  4. content スキャン対象外: Markdown 経由で prose を付ける場合、ラッパー側テンプレートにクラス文字列が無いと purge される

解決策

1. プラグインを追加する

npm install -D @tailwindcss/typography

2. v3: tailwind.config.js の plugins に登録

// tailwind.config.js
module.exports = {
  content: ["./src/**/*.{html,js,ts,jsx,tsx,md,mdx}"],
  plugins: [require("@tailwindcss/typography")],
};

3. v4: CSS で @plugin を宣言

Tailwind v4 では設定ファイルが任意になり、CSS 側で plugin を読み込む。

/* app.css */
@import "tailwindcss";
@plugin "@tailwindcss/typography";

4. content パスを広げる

prose を実際に付けるテンプレートやレイアウトファイルを v3 では content、v4 では @source に含める。
Markdown 内部に書いた class はスキャンされないので、ラッパー側 (<article className="prose">{children}</article>) で付与すると確実。

この記事は役立ちましたか?