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

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

#tailwindcss #typography #prose #plugin

公開: 2026-06-02更新: 2026-09-23

実行例あり（2026-09-23 に実環境で検証）

要約

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

実行例

実際に node:20 で動かすと、プラグインを入れる前のビルド結果には prose を含む行が 1 つも無く、@tailwindcss/typography を追加して再ビルドすると 196 行に増える。lg:prose-xl も同じ再ビルドで 48 行出力されるので、レスポンシブの派生クラスまでプラグイン側が供給していることが分かる。

$ npx tailwindcss -i src/input.css -o out.css
Browserslist: caniuse-lite is outdated. Please run:
  npx update-browserslist-db@latest
  Why you should do it regularly: https://github.com/browserslist/update-db#readme
 
Rebuilding...
 
Done in 86ms.

$ grep -c prose out.css
0
0 = prose は Tailwind 本体のユーティリティではないため出力されない

$ npm install --silent --no-save @tailwindcss/typography

$ npx tailwindcss -i src/input.css -o out.css
Browserslist: caniuse-lite is outdated. Please run:
  npx update-browserslist-db@latest
  Why you should do it regularly: https://github.com/browserslist/update-db#readme
 
Rebuilding...
 
Done in 174ms.

$ grep -c prose out.css
196

$ grep -m3 -A2 -F ".prose {" out.css
.prose {
  color: var(--tw-prose-body);
  max-width: 65ch;
--
.prose {
  --tw-prose-body: #374151;
  --tw-prose-headings: #111827;
prose と lg:prose-xl が出力に含まれるようになった

$ grep -c -F "lg\:prose-xl" out.css
48

— 2026-09-23 時点の出力

検証環境

検証日

2026-09-23

実行環境

node:20Debian GNU/Linux 12 (bookworm)

バージョン

Node.js 20.20.2
npm 10.8.2
Python 3.11.2
Git 2.39.5

この記事の「実行例」は、上記の環境で実際にコマンドを実行して得られた出力をそのまま掲載しています。再現手順はリポジトリの検証スクリプトとして管理し、定期的に再実行して出力を更新しています。

よくある原因

プラグイン未導入: @tailwindcss/typography を npm install していない
plugins 配列に未登録 (v3): tailwind.config.js の plugins に追加し忘れている
@plugin 漏れ (v4): CSS-first 設定で @plugin ディレクティブを書いていない
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>) で付与すると確実。

要約

実行例