お知らせ

2025年11月27日

test

これまで、Tailwind を使って記事・ドキュメント・ブログ投稿にスタイルを当てようとすると、 タイポグラフィに対する鋭い感覚と複雑なカスタムCSSが大量に必要となる面倒な作業でした。

デフォルトでは、Tailwindは段落、見出し、リストなどのブラウザ標準スタイルをすべて削除します。 これはアプリケーションUIを構築する際にはとても便利で、ユーザーエージェントのスタイルを 解除するための作業が減るからです。しかし、CMSのリッチテキストエディタやMarkdownファイルから 出力された「ただのコンテンツ」をスタイルしたい場合には、驚くほど直感的ではありません。

実際、この点について多くの苦情をいただきます。人々はよく次のように尋ねます。

Tailwind はなぜ h1 要素のデフォルトスタイルを消してしまうのですか？ どうやって無効化するのですか？ほかのベーススタイルも全部失われるとはどういう意味ですか？

こうした声は理解しています。しかし、単にTailwindのベーススタイルを無効化することが 本当に望んでいることだとは思っていません。ダッシュボードUIで p 要素を使う度に 面倒な余白を消す作業などしたくないはずです。さらに、ブログ記事がユーザーエージェントの 標準スタイルのままなのも望んでいないでしょう。求めているのは「最高の見た目」であり、 「最低の見た目」ではありません。

@tailwindcss/typography プラグインは、ベーススタイルを無効化するような 非常識な解決法に頼ることなく、皆さまが「本当に欲しいもの」を提供する試みです。

このプラグインは prose クラスを追加します。このクラスをバニラHTMLの 任意のブロックに適用すると、美しく整形された文書に変換されます。

<article class="prose">
  <h1>Garlic bread with cheese: What the science tells us</h1>
  <p>
    For years parents have espoused the health benefits ...
  </p>
  <p>
    But a recent study shows that ...
  </p>
</article>

プラグインの使い方や含まれる機能の詳細については、 ドキュメントをご覧ください。

ここから先に期待できること

ここから先は、私自身がこのプラグインを試すために書いたナンセンスな文章の羅列です。 太字、箇条書き、番号付きリスト、コードブロック、引用、斜体など、思いつく限りの タイポグラフィ要素を含んでいます。

これらを網羅する理由は以下のとおりです：

  1. すべてが初期状態で美しく見えるようにしたい。
  2. 本当に理由は1つだけで、これこそがプラグインの存在意義。
  3. しかしリストは2つより3つの方がリアルなので3番目の理由を追加。

次に別の見出しスタイルを試します。

タイポグラフィは簡単であるべき

これが見出しです。もし私たちがうまく作れていれば、適切な見た目になっているはずです。

タイポグラフィについて誰かが私に言った賢い言葉があります：

タイポグラフィは、内容をゴミのように見せたくなければ非常に重要だ。 良くすれば悪くはならない。

画像の見た目もデフォルトで問題ないことが重要でしょう：

一般的な誤解に反し、Lorem Ipsum は単なるランダムな文章ではありません。 紀元前45年の古典ラテン文学に由来し、2000年以上の歴史があります。

次に、箇条書きが適切に見えるか確認します：

  • これがリストの最初の項目です。
  • この例では項目を短くしています。
  • 後でより長く複雑な項目を試します。

このセクションはここで終了です。

見出しを連続させるとどうなるか？

これも適切に見えるべきです。

見出しが連続するケースもあります。その場合は通常、2つ目の見出しの 上マージンを調整し、段落の後にくる見出しよりも密接に配置したほうが 見た目がよくなります。

段落の後に見出しが続く場合…

段落の後に見出しが来る場合は、少し広めの余白が必要です。 では、より複雑な箇条書きがどのように見えるか確認しましょう。

  • リスト項目に見出し的なテキストを入れることがあります。

    これが格好良いと思っているのですが、実際にはスタイル調整が難しく面倒です。

    さらに、2〜3段落を入れることもあります。段落や項目同士の間隔を整えるのは 本当に大変で、正直言ってこう書くべきではないという意見もあるでしょう。

  • リストなので最低2項目は必要です。

    すでに前の項目で説明しましたが、リストは1項目だけでは成立しません。 スタイル調整のためにもリアルな例が必要なので、2項目目を入れています。

  • 3項目目を入れるのも悪くありません。

    2つだけでも良かったかもしれませんが、3つあっても問題ありません。 まだネタが尽きていないので入れておきます。では Enter を押します。

このようなリストの後は、締めの文章を置くことが多いです。 いきなり見出しに飛ぶと不自然に見えるためです。

コードも初期状態で良い見た目であるべき

多くの人は highlight.js や Prism を使ってコードブロックを装飾しますが、 シンタックスハイライトが無くても最低限見られるレベルにしたいところです。

以下は現在の tailwind.config.js のデフォルト例です：

module.exports = {
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

これが十分に良い見た目であることを願っています。

ネストされたリストはどうか？

ネストされたリストは基本的に見た目が悪いため、Medium のようなエディタは そもそも禁止しています。しかし、皆さんの中には使いたい人もいるので、 一応サポートせざるを得ません。

  1. ネストされたリストはあまり良いアイデアではありません。
    • 「整理されている」と思うかもしれませんが、実際は読みにくい形になります。
    • UIのナビゲーションでも深い階層は悪手です。フラットに保つべきです。
    • ソースコードの深いフォルダ階層も役に立ちません。
  2. 項目数が必要なので、これも追加。
    • 2階層以上のスタイルを調整するかは不明です。
    • 2階層でさえやりすぎ、3階層は確実に悪手です。
    • 4階層目を使うなら刑務所に行くべきレベルです。
  3. 2項目では不十分なので、3項目目。
    • 重ねて言いますが、読ませたいならネストされたリストは避けてください。
    • 誰もこれを読みたくありません。
    • これをスタイルしなければならない状況が腹立たしいです。

Markdown のリストで最も厄介なのは、リスト項目が複数段落を持つ場合にしか <p> が生成されないことです。そのため、この特殊ケースのスタイルも考慮する必要があります。

  • 例えば、これもネストされたリストです。

    ただし今回は2段落あります。

    • これらの項目には <p> がつきません。
    • 1行のみだからです。
  • しかし2つ目の上位項目ではつきます。

    この段落の余白が厄介になる理由はこれです。

    • 2行目を追加したため、今回の項目には <p> がついています。

      これが2行目です。

    • 最後にもう1項目足して、リストらしくしました。
  • 締めの項目（ネストなし）。理由は特にありません。

このセクションを締めるための最後の一文です。

説明リストも忘れていません

正確には、2020年に最初のバージョンをリリースした後、 説明リストを追加するのに3年かかりました。しかし今はあります。 FAQなどに最適です。

なぜ象は木の上に隠れているのを見たことがないのですか？
隠れるのがとても上手だからです。Lorem ipsum dolor sit amet...
体がなく鼻もない人を何と呼びますか？
Nobody knows。Lorem ipsum dolor sit amet...
なぜプテラノドンがトイレへ行く音は聞こえないのですか？
pee（尿）が silent だからです。Lorem ipsum dolor sit amet...

ほかにもスタイルすべき要素があります

リンクも忘れてはいません。 Tailwind CSS へのリンク のように。 青にしようかと思いましたが「古い感じ」がしたので、ダークグレーにしました。

テーブルスタイルも追加しました。ご覧ください：

レスラー 出身地 必殺技
Bret "The Hitman" Hart Calgary, AB Sharpshooter
Stone Cold Steve Austin Austin, TX Stone Cold Stunner
Randy Savage Sarasota, FL Elbow Drop
Vader Boulder, CO Vader Bomb
Razor Ramon Chuluota, FL Razor’s Edge

インラインコードも美しく見える必要があります。 例えば <span> 要素の話をするときや、 @tailwindcss/typography について言及するときなどです。

見出し内で code を使うこともあります

あまり良いアイデアではありませんが、歴史的にうまく見せるのが困難でした。 とはいえ、バッククォートで囲むこの方法は十分機能します。

また、リンクの中に code を入れることもあり、 例えば tailwindcss/docs についてのリンクなどです。バッククォートの下線が気になりますが、 それを解消するための労力に比べればまったく価値がありません。

まだ h4 を使っていませんでした

しかし今使いました。お願いだから h5 や h6 は使わないでください。 Medium が2階層までしかサポートしていない理由がわかるはずです。

h4 でさえ本文と同じ大きさなので、これ以上小さい見出しを どう扱えばよいのか分かりません。

積み重なった見出しについても考える必要があります

h4 でも崩れないように確認します

上の見出し群が適切にスタイルされていることを祈ります。

最後に、大きめの段落を置いて文書全体を締めます。理由は説明できませんが、 文末が見出しで終わると不安定に見えるからだと思います。

この文章でも十分長い気がしますが、最後の一文を足しても問題ありません。