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 で導入方法が違う点に注意する。
よくある原因
- プラグイン未導入:
@tailwindcss/typographyをnpm installしていない - plugins 配列に未登録 (v3): tailwind.config.js の
pluginsに追加し忘れている @plugin漏れ (v4): CSS-first 設定で@pluginディレクティブを書いていない- content スキャン対象外: Markdown 経由で
proseを付ける場合、ラッパー側テンプレートにクラス文字列が無いと purge される
解決策
1. プラグインを追加する
npm install -D @tailwindcss/typography2. 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>) で付与すると確実。