Astro + TailwindCSS + microCMSでのスタイル適用つまずきポイント

こんにちは、Yu_riです。
今回は自分が本ブログをAstro + TailwindCSS + microCMSで開発した際にスタイル適用の部分で何点かかつまずいてしまったところがあるので、それをまとめていきます。

① microCMSのコンテンツを表示するとスタイルが適用されない

【原因】
これはTailwind CSSがブラウザのデフォルトのCSSを無効化しているからです。

Tailwind CSSの公式ドキュメントを見てみると「@tailwind base」によってデフォルトのCSSを無効化するPreflightというスタイルシートが適用されるようです。
Preflightの概要：https://tailwindcss.com/docs/preflight
Preflightの内容：https://unpkg.com/[email protected]/src/css/preflight.css

【解決策】
@tailwindcss/typographyをインストールする。
参考：https://tailwindcss.com/docs/plugins#typography

公式ドキュメントをみるとMarkdownやCMSから取得したコンテンツに対して適切なスタイルを適用してくれる「prose」というクラスを提供してくれるみたいです。

使用方法としては、@tailwindcss/typographyをインストール後、tailwind.config.jsのpluginsに以下を追加します。
参考：https://github.com/tailwindlabs/tailwindcss-typography

module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/typography'),　//この部分を追記
    // ...
  ],
}

あとはスタイルを適用したい箇所にproseクラスを追加するだけです。

<div set:html={content} class="prose"/></div>

② microCMSのカスタムclassが適用されない

【原因】
これはカスタムclass（コンテンツ自体）がAstroコンポーネントのスコープ外にあるためです。
そのためカスタムclassのスタイルを定義してもコンテンツには影響しません。

【解決策】
カスタムclassのスタイルを定義するstyleタグに「is:global」を付与（グローバルスタイル）する。
（もっといいやり方はあると思いますが、、）

<style is:global>
  /* カスタムclassのスタイルを記述 */
  .cms-sample { color: red; }
</style>

Astroの公式ドキュメントを見ると、グローバルスタイルはなるべく使用しないこととあります。
しかしCMSのコンテンツなどAstroコンポーネントのスコープ外となってしまうものには最適な方法とあるため、今回のようなパターンではグローバルスタイルを使用するのが良いと思います。
参考：https://docs.astro.build/en/guides/styling/#global-styles