@tailwindcss/typography でマークダウンのスタイルを整えた②
Yuichi Kanno
こちらの記事は @tailwindcss/typography でマークダウンのスタイルを整えた① の続きです。
前回は慣れない執筆により途中で力尽きたので、本記事で続きを書こうと思います。
これからは頑張って１つにまとめて書いていくので許してください。
早速本題ですが、様々な修飾子について解説します。
カラー修飾子
全体のグレースケールを設定できます。
tailwindが用意している5つのパターンから選択してproseのmodifierとして設定することで適用出来ます。
prose-grayがデフォルトで設定されており、他にはNeutralやStoneなどがあります。
<article class="prose prose-stone">
{{ markdown }}
</article>
サイズ修飾子
こちらはデフォルトのテキストサイズを指定できます。
通常のtailwindcssと使い方は変わらないため、詳細なプロパティはドキュメントを参照してください。
同じくmodifierとして設定することで適用出来ます。
<article class="prose md:prose-lg lg:prose-xl">
{{ markdown }}
</article>
ダークモード対応
ダークモード対応用のmodifierも用意されています。 prose-invert クラスをmodifierとして付与します。
<article class="prose dark:prose-invert">
{{ markdown }}
</article>
他にもカラーカスタマイズなど細かな仕様はたくさんあります。
本ブログでは最大限利用するというよりは最低限マークダウンの見た目を整える目的で使用している為、抑えるべき基本的な箇所は書いた内容で十分かと思います。
快適なマークダウンライフを送りましょう。