microCMS + TailwindCSSでのHTMLコンテンツに対するスタイル適用

以前Crea7というタイムラインとブログ機能を持ったサイトを作成した時に、Next.js + microCMS + Tailwind CSSで実装を行いました。

問題点

記事の詳細画面では、microCMSのリッチエディタで作成した記事を、HTML形式で取得しinnerHTMLで表示を行なっています。

<div
className="text-black pt-7"
dangerouslySetInnerHTML={{ __html: `${article.body}` }}
></div>

本来であればmicroCMS側が返すHTMLにスタイルが当たっているので、innerHTMLで表示を行うだけである程度いい感じの画面になるのですが、Tailwind CSSを適用している状態では標準のスタイルは以下のように適用されません。

そこで今回は@tailwindcss/typographyでスタイルを適用します

@tailwindcss/typographyの導入

tailwindcss/typographyはTailwindCSS v2.0 +用に設計されているHTMLにスタイルを適用してくれるプラグインです。
とても導入のステップも少ないので便利です。

導入手順

1. まずはnpmでプラグインをインストールします。

# Using npm
npm install @tailwindcss/typography

# Using Yarn
yarn add @tailwindcss/typography

2. 次にドキュメント通りtailwind.config.jsに以下を追記します

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

3. 最後にproseクラスをリッチエディタのコンテンツを吐き出しているクラスに追記します

<div
className="prose text-black pt-7"
dangerouslySetInnerHTML={{ __html: `${article.body}` }}
></div>

またサイズ修飾子やカラー修飾子があり、全体のサイズ調整やリンクのカラーを変更することが可能です。Tailwind CSSのレスポンシブとサイズ修飾子を組み合わせることで端末サイズに合わせて見やすいレイアウトを実装することが可能だと思います。

また上記のクラスを当てた結果が以下の通りです。

簡単に導入しいい感じのスタイルを適用する事ができましたが、リポジトリのIssueにある通り適用されているスタイルが気に入らない場合は、個別にスタイルを当てるなどをするしかなさそうです。