microCMSにTailwindを導入するとデフォルトのcssが無効化される
で
- Next.js
- tailwind css
- microCMS
を使ったブログ兼ポートフォリオを作成したことを記事にしました。
制作中、microCMSで記述したブログを取得して表示したところスタイルが適用されなくなってしまいました。
実際にはこんな感じです↓
デフォルトcssが効いている状態
デフォルトcssが効いていない状態
microCMSの管理画面で設定した、以下のようなリッチテキストが効いてない状態です。
しかし、実際に送られてきているコードでは<h2>などのタグがしっかり設定されています。
つまり<h2>タグに設定されているデフォルトのcssが無効化されているようです。
ちなみにデフォルトcssはブラウザによって異なるそうですが、例えばchromeでは<h2>に以下のようなcssが適用されています。
h2 {
display: block;
font-size: 1.5em;
margin-block-start: 0.83em;
margin-block-end: 0.83em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
}
これはtailwindのドキュメントに、無効にしていると記載がありました。
タイプスケールから誤って逸脱するのを防ぐのに役立ちます。 デフォルトでは、ブラウザはTailwindのデフォルトのタイプスケールに存在しない見出しにサイズを割り当て、独自のタイプスケールに存在することが保証されていません。
UI開発では、見出しを視覚的に強調しないようにする必要があります。 デフォルトで見出しのスタイルを解除するということは、見出しに適用するスタイルが意識的かつ意図的に行われることを意味します。
しかしブログ投稿のように、外部サイトで記述した内容を持ってくるときはそのままデフォルトcssを適用したいと思います。
global.cssにデフォルトcssを記述してもいいのですが、公式ではプラグインの利用を推奨しています。
このプラグインをインストールし、必要な箇所にだけclass=proseを追加すれば良いとのことです。
私のポートフィリオでは本文を表示する箇所だけに適用しました。
{/* ここから本文 */}
<div
className='prose p-8 my-4 mx-auto bg-gray-100 dark:bg-gray-300'
dangerouslySetInnerHTML={{
__html: `${blog.body}`,
}}
/>
私はこの原因を突き止めるのに30分もかかってしまいました😅
Discussion