無料
ご
相
談
・
お
見
積
も
り
2023.07.05
下記のように、文字だけが表示され管理画面で想像していたデザインとはかけ離れたデザインになってしまいます。
コードは下記になります。
<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タグ（見出し、段落、リンク、引用、リストなど）に適切なスタイルを提供します。
