tailwindcss/typographでTailwind CSSに見出し要素のサイズを設定する

経緯

現在製作中のmicroCMSを用いたNext.js製ブログサイトでは、microCMSのリッチエディタで編集した記事データを生のHTMLとして取得し、html-react-parserというライブラリを使用してHTMLにパース、表示しています。

ところが、このページにTailwind CSSを適用すると見出しやテキストなどのスタイルがリセットされてしまいます。

これはTailwindCSSの仕様上、ブラウザ間の不一致を滑らかにし、デザイン システムの制約内での作業を容易にするためのPreflightというベースCSSが、初期状態で読み込まれていることが原因のようです。

解決策

https://tailwindcss.com/docs/preflight

Tailwind CSSの公式ドキュメントに解決策が示されていました。

@tailwindcss/typographyというプラグインを使用することでデフォルトのリスト スタイルを選択的に導入できるとのこと。

導入

まず、パッケージをインストールします。

yarn add @tailwindcss/typography

インストール後、tailwind.config.jsに以下を追記します。

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

あとは、スタイルを適用したい要素にproseクラスを指定すると、

しっかりと見出しのサイズが変更されていました✨