TailwindCSSでmicroCMSのコンテンツをデザインする方法
投稿日: 2023/07/05
更新日: 2023/07/05
microCMSでブログの中身を表示すると簡素なデザインになる
下記のように、文字だけが表示され管理画面で想像していたデザインとはかけ離れたデザインになってしまいます。
コードは下記になります。
<div className="w-full justify-center mt-8 md:w-4/5">
<div
dangerouslySetInnerHTML={{
__html: `${blog.content}`,
}}
/>
</div>解決方法
proseをつけるです。
<div className="w-full justify-center mt-8 md:w-4/5">
<div
className="prose"
dangerouslySetInnerHTML={{
__html: `${blog.content}`,
}}
/>
</div>prose付与後下記のように、まあまあ美しいデザインに仕上げてくれます。
proseというのは、Tailwind CSSが提供するプラグインの一つで、MarkdownやRich Textコンテンツのデザインとスタイリングを楽にするためのものです。記事、ブログ投稿、ドキュメンテーションなどのテキスト重視のコンテンツに特に有効で、各種のHTMLタグ（見出し、段落、リンク、引用、リストなど）に適切なスタイルを提供します。