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

はじめに

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

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

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"),
  ],
}

基本的な使い方

もっともシンプルな使い方は、記事コンテンツを囲む要素に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に渡すのは避け、必要であればサニタイズ処理を挟んでください。

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

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

<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>

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

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

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

まとめ

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

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