CMSから来るHTMLが崩れる。Tailwindcss-Typographyが埋める溝

はじめに

MarkdownをHTMLに変換して表示したら、見出しと本文がくっついていたり、リストの余白がバラバラだったり——そんな経験はありませんか。Tailwind CSSはユーティリティクラスを1つ1つ指定していくスタイルなので、h1やp、ulといったタグに自動でスタイルが当たりません。そのため、CMSやMarkdownから生成された「中身を自分でコントロールできないHTML」は、そのままだと読みにくい見た目になりがちです。

この問題を解決するのが、Tailwind Labs公式プラグインの@tailwindcss/typographyです。1つのクラスを付けるだけで、見出し・段落・リスト・引用・コードブロックといった要素に、美しいタイポグラフィのデフォルトスタイルを一括で適用できます。

とはいえ、読むより触った方が早いと思います。proseクラスをボタンで切り替えながら見た目の変化を確認できるサンプルを用意したので、先に挙動を見たい方はこちらからどうぞ。

＞＞＞まずはサンプルを確認＜＜＜

Tailwindcss-Typographyとは

Tailwindcss-Typographyは、公式が「Beautiful typographic defaults for HTML you don't control.（制御できないHTMLに、美しいタイポグラフィのデフォルトを）」と説明する通り、MarkdownパーサーやCMSが吐き出す生のHTMLを、きれいな記事レイアウトに変換するためのプラグインです。GitHub上で6,400以上のスターを集めており、2026年6月時点の最新バージョンはv0.5.20です。

主な特徴

proseクラス1つで完結 - 対象要素にproseを付けるだけで、配下のh1〜h6、p、ul、ol、blockquote、code、tableなどに一貫したスタイルが適用されます
5種類のグレースケールテーマ - Slate、Zinc、Neutral、Stone、Grayの5色からベースカラーを選べます
ダークモード標準対応 - prose-invertを組み合わせるだけで、ダーク背景向けの配色に反転します
サイズバリエーション - prose-smからprose-2xlまで5段階のサイズを用意しており、コンテナ幅に応じて調整できます
要素単位の細かい上書き - prose-headings:やprose-a:のようなモディファイアで、見出しやリンクだけを個別にカスタマイズできます

インストール

npm、あるいは他のパッケージマネージャーでインストールします。

npm install -D @tailwindcss/typography

pnpm add -D @tailwindcss/typography

yarn add -D @tailwindcss/typography

Tailwind CSS v4系では、CSSファイル側で@pluginディレクティブを使ってプラグインを読み込みます。

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

Tailwind CSS v3系のようにtailwind.config.jsでプラグインを管理している場合は、以下のように追加します。

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

Tailwindcss-Typographyのサンプルを動かす

Tailwindcss-Typographyは、proseクラスを1つ付けるだけで見出し・段落・リスト・引用のスタイルが一括で決まります。以下はTailwind Play CDN経由で@tailwindcss/typographyを読み込んだ最小構成です。<script src="https://cdn.tailwindcss.com">にバージョンとplugins=typographyを指定するだけで、ビルド設定なしにプラグインが有効になります。

<script src="https://cdn.tailwindcss.com/3.4.19?plugins=typography@0.5.20"></script>

<article class="prose dark:prose-invert">
  <h1>見出し</h1>
  <p>
    <code>prose</code>クラスを付けるだけで、見出し・段落・リストに
    読みやすいスタイルが自動で当たります。
  </p>
  <ul>
    <li>サイズは prose-sm 〜 prose-xl で調整</li>
    <li>ダークモードは prose-invert で反転</li>
  </ul>
</article>

実際に動かせるのが下のサンプルです。上部のボタンでprose-sm・prose・prose-lg・prose-xlというサイズバリエーションを切り替えられるほか、右端のボタンでprose-invertのオン・オフを切り替えてダークモード表示を確認できます。

ボタンを押すとarticle要素のclassが書き換わり、Tailwindcss-Typographyがその場でスタイルを再計算します。data-sizeの値をprose-2xlまで広げれば、より大きなサイズバリエーションも確認できますし、prose-invertを外せばライトモードの配色に戻ります。自分のブログやドキュメントサイトに組み込むときも、このproseまわりのクラスを差し替えるだけで見た目を調整できます。

基本的な使い方

もっともシンプルな使い方は、記事コンテンツを囲む要素にproseクラスを付けるだけです。

<article class="prose">
  <h1>見出しです</h1>
  <p>
    ここに本文が入ります。Tailwindcss-Typographyを使うと、
    タグごとに個別クラスを書かなくても読みやすい行間や余白が自動で適用されます。
  </p>
  <ul>
    <li>リスト項目1</li>
    <li>リスト項目2</li>
  </ul>
  <blockquote>
    <p>引用文もこの通り、きれいに整形されます。</p>
  </blockquote>
</article>

ダークモードのページであれば、dark:修飾子と一緒にprose-invertを追加します。

<article class="prose dark:prose-invert">
  <h1>ダークモードでも読みやすい見出し</h1>
  <p>背景色に合わせて文字色や強調色が自動で反転します。</p>
</article>

コンテナの横幅が広い場合は、サイズ違いのクラスで文字サイズを調整できます。

<article class="prose prose-lg max-w-none">
  <h1>広いコンテナ向けの大きめタイポグラフィ</h1>
  <p>prose-smからprose-2xlまで、レイアウトに合わせて選べます。</p>
</article>

実践的なユースケース

Markdownで書いたブログ記事を表示する

MarkdownをHTMLに変換するライブラリ（例: remark、markdown-it）と組み合わせると、変換後のHTMLをそのままproseで囲むだけで見栄えの良い記事ページが完成します。

type ArticleProps = {
  htmlContent: string;
};

function Article({ htmlContent }: ArticleProps) {
  return (
    <div
      className="prose prose-slate dark:prose-invert lg:prose-lg mx-auto"
      dangerouslySetInnerHTML={{ __html: htmlContent }}
    />
  );
}

ここでのポイントは、htmlContentが自分たちで管理しているMarkdownファイルなど信頼できるソースから生成されたものに限ることです。ユーザーが自由入力できるフォームの内容をそのままdangerouslySetInnerHTMLに渡すのは避け、必要であればサニタイズ処理を挟んでください。

上記のprose prose-slate dark:prose-invert lg:prose-lg mx-autoという組み合わせを、実際にダークモードを切り替えながら確認できるのが以下のサンプルです。tailwind.configでdarkMode: 'class'を指定し、<html>要素にdarkクラスを付け外しすることでdark:prose-invertが効くタイミングを再現しています。

darkクラスの有無でdark:prose-invertが発火し、見出し・本文・リストの配色だけがまとめて反転することが分かります。lg:prose-lgの部分をlg:prose-xlに変えれば、広い画面でのフォントサイズもさらに調整できます。

見出しやリンクだけ独自の色に変更する

要素ごとのモディファイアを使えば、ブランドカラーに合わせた微調整も簡単です。

<article class="prose prose-headings:text-indigo-600 prose-a:text-indigo-500 prose-a:no-underline hover:prose-a:underline">
  <h2>見出しだけインディゴ色に</h2>
  <p>
    本文中の<a href="/docs">リンク</a>も下線なしのスタイルに変更しています。
  </p>
</article>

prose-headings:やprose-a:のようなモディファイアはテーマカラーの切り替えにも使えます。以下はボタンで3種類のテーマカラーを切り替え、prose-headings:とprose-a:の値がその場で入れ替わる様子を確認できるサンプルです。

ボタンを押すたびにarticle要素のprose-headings:とprose-a:の値が入れ替わり、見出しとリンクの色だけがテーマカラーに追従します。hover:prose-a:underlineの部分を削除すると、ホバー時の下線演出がなくなることも確認できます。

CMSのプレビュー欄など、特定のコンテナ幅に合わせる

CMSの管理画面プレビューのように、prose本来のmax-width制約が邪魔になる場面では、max-w-noneと組み合わせて幅を親要素に委ねられます。

<div class="prose prose-sm max-w-none">
  <!-- CMSから受け取った本文HTML -->
</div>

チェックボックスでmax-w-noneの付け外しを切り替えられるサンプルです。幅360pxのプレビュー枠の中で、prose本来のmax-width制約が余白としてどう効いてくるかを確認できます。

チェックを外すとmax-w-noneが外れ、prose-sm本来のmax-widthによって360px幅のプレビュー枠内でもテキストが折り返される位置が変わります。CMSの管理画面のように親要素の幅を活かしたいときは、チェックを入れた状態、つまりmax-w-noneを付けたままにしておくのが基本です。

まとめ

Tailwindcss-Typographyは、Markdownやリッチテキストエディタ、CMSから出力される「タグ構造しか制御できないHTML」に対して、proseクラス1つで読みやすいタイポグラフィを与えてくれるプラグインです。グレースケールテーマやサイズ、ダークモード対応まで標準で揃っており、要素単位のモディファイアで細かい調整もできるため、ブログやドキュメントサイトを作るなら導入コストに対して得られる効果が大きいツールです。

すでにTailwind CSSを使っているプロジェクトであれば、インストールしてコンテンツをproseで囲むだけですぐに効果を実感できます。まずは自分のブログやドキュメントページに適用して、見た目の変化を確かめてみてください。