Book Backpacker

Astro+Tailwindcssで、マークダウンが適用されなかった問題を@tailwindcss/typographyで解決

2023年11月19日

このエン
トリーをはてなブックマークに追加

問題:マークダウンで書いた記事にh1,h2,h3…が適用されなかった

Astro+Tailwindcssで作っていたブログで、マークダウンの「# a」も「## a」も同じ無装飾の文字に表示された。
ブログの詳細については以下の記事をご覧ください。

当ブログを支える技術:Astro
当ブログをさせるAstroなどの技術について紹介
当ブログを支える技術:Astro favicon https://book-backpacker.com/posts/frame/

原因:TailwindcssのPreflightでスタイルがリセットされていた

Tailwindcssではデフォルトで、全ての見出しのスタイルをリセットする。

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

これにより見出しが全部同じ表示になってしまっていた。

解決策

@tailwindcss/typographyを導入することで解決
https://tailwindcss.com/docs/typography-plugin
“prose”クラスを指定することでデフォルトの見出しのスタイルを適用できる。

<div class="prose">
<!-- 見出しにスタイルが適用される -->
<h1>見出し</h1>
<h2>見出し</h2>
</div>
<!-- 見出しがスタイルに適用されない -->
<h1>見出し</h1>
<h2>見出し</h2>

また、prose-xlなどでサイズ指定もできる。

<article class="prose prose-xl">
  {{ markdown }}
</article>