【react-markdown + tailwindcss】見出しやリストのスタイルが反映されない時の解決法

Posted at 2025-10-29

はじめに

react-markdownを使ってマークダウン入力機能を作っていたところ、プレビュー表示しても見出しの大きさが変わらない事象がありました。
解消方法について調べたことをまとめます。

react-markdownライブラリを元にテキストエリアと作成、マークダウン記法で書くも、プレビューで見た目が一部変わらない
左：MD画面、右：プレビュー

スタイルを適用していなかったから。

tailwindcssを導入している場合、デフォルトでブラウザの基本スタイルをリセットし、<h1>や<ul>などの要素が通常のテキストと同じ見た目になります。
そのため、反映されていないと勘違いしていました。

@tailwindcss/typographyを使用する

公式READMEより引用(翻訳)

公式のTailwind CSSタイポグラフィープラグインは、MarkdownからレンダリングされたHTMLやCMSから取得したHTMLなど、制御できないシンプルなHTMLに美しいデフォルトのタイポグラフィを追加するために使用できる一連のproseクラスを提供します。

npm install -D @tailwindcss/typography

tailwindcss v4を導入しているため、globals.cssに追加しました。

globals.css

@import "tailwindcss";
@import "tw-animate-css";
+ @plugin "@tailwindcss/typography";

※v3の場合はtailwind.config.jsに定義

js：tailwind.config.js

module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/typography'),
    // ...
  ],
}

+  <div className="prose">
    <Markdown remarkPlugins={[remarkGfm]}>{markdown}</Markdown>
+  </div>

適用されました。

react-markdownのプラグインを指定しないと表示されないのか？など回り道をしてしまいました。
tailwindcssもライブラリを導入するだけでなく定義周りも知っておきたいと思う出来事でした。