発生している問題

マークダウンファイルを取得し、HTML に変換してブラウザで表示した時に h1 タグの文字の大きさや太さがが通常の文章と同じサイズになっていた。つまり、普通なら当たっているはずの h1 タグのスタイルが当たっていなかった。

原因

Tailwind CSSの機能で、HTML タグで当たってる既存のスタイルが一部デフォルトで当たらないようになっているらしい。

公式ドキュメントの該当部分

https://tailwindcss.com/docs/preflight#headings-are-unstyled

解決策１(失敗)

GitHub の issueにあった方法を試す。

https://github.com/tailwindlabs/tailwindcss/issues/1460

@tailwind base;

h1 {
  @apply text-2xl;
}
h2 {
  @apply text-xl;
}
h3 {
  @apply text-lg;
}
a {
  @apply text-blue-600 underline;
}

@tailwind components;

@tailwind utilities;

上のように、もともと当たっていたスタイルを再び定義しようとしたがうまく適用されず。

解決策２(成功)

先ほどの公式ドキュメントに書いてあったプラグインを導入する

https://tailwindcss.com/docs/typography-plugin

npm でインストール

npm install -D @tailwindcss/typography

tailwind.config.js に記述

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

該当のクラスに『prose』クラスを追加

{
  /* 本文 */
}
<div className='prose max-w-none'>
  <div dangerouslySetInnerHTML={{ __html: body }} />
</div>;

すると、やっとうまくスタイルが適用された。

prose クラスの副作用としてmax-withのスタイルが付与されるので、それを考慮しないと意図しないスタイルが適用されてしまう可能性があります。

最後に

1 次情報を信じよ

では、Bye