前提

• Jamstackでサイトを構成し、マークダウンで記事を書いている
• CSSライブラリとしてTailwindcssを導入している
• マークダウンの出力にCSSを当てる必要があるけど、ひとまずは最低限サマになる、無難なスタイルで良い

この記事はNuxtContentというNuxt.jsのモジュールを用いて作成しています。マークダウンで記述した原稿がモジュールでよしなにHTMLに変換され、こうしてWebページとして提供されています。

変換されたHTMLはスタイルが未設定です。これにスタイルを当てるには、まず思いつくのは出力されたHTMLの見出しやパラグラフ、リストなど各要素に対しCSSを記述するやり方です。しかし若干手間に感じました。

そんな中で今回紹介するやり方は、手っ取り早く必要最低限に、Tailwindcssと統一感を保ちつつマークダウン（からレンダリングしたHTML）にスタイルを当てたい場合の解決策となります。

tailwindcss-typographyについて

tailwindcss-typographyとはTailwindCSSによる公式プラグインです。

A plugin that provides a set of prose classes you can use to add beautiful typographic defaults to any vanilla HTML you don't control (like HTML rendered from Markdown, or pulled from a CMS).

このプラグインはproseクラスを設定するだけで、いじれないHTML (マークダウンからレンダリングしたり、CMSから取得するHTML)に美しい文字スタイリングを設定できます。

https://github.com/tailwindlabs/tailwindcss-typography

導入編

1. インストール

コマンドを実行します。

npm install @tailwindcss/typography

tailwind.config.jsにプラグインとして設定します。

module.exports = {
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

2. HTMLに記述

マークダウン出力部分を囲うHTMLタグのクラス名にproseと記述します。

例）当サイトの場合
nuxt-contentタグがマークダウン出力部分なので、ここを囲うdivタグにクラス名proseと記述。

<div class="prose">
    <nuxt-content :document="XXX" />
</div>

ここまでの手順を行い、導入が成功するとマークダウン部分にスタイルが反映されます。

修飾子を用いたカスタマイズ編

proseと記述するだけでも、各要素に必要最低限のスタイルが当たったかと思いますが、 もう少しカスタマイズしたいと思った場合、手軽に使える修飾子が用意されています。

カラー修飾子

カラー修飾子ではリンクの色を設定できます。このページではprose blueとしているため、ご覧のようにリンクのスタイルは青色になっています。

<div class="prose prose-blue">
    <nuxt-content :document="XXX" />
</div>

サイズ修飾子

• サイズ修飾子ではbodyタグの文字サイズを設定できます。例えば、ちょっと文字サイズが大きいなぁ…という場合には、prose-smとすることで小さくできます。

応用：レスポンシブ対応

前提としてTailwindcssにはブレイクポイント修飾子が用意されています。これと組み合わせることでレスポンシブな文字サイズ調整が実装できます。

<div class="prose sm:prose lg:prose-lg xl:prose-xl">
    <nuxt-content :document="XXX" />
</div>

カスタマイズまとめ

ここまで紹介したカラー、サイズ、レスポンシブを全部載せすると次の通り。

<div class="prose prose-blue sm:prose-blue sm:prose lg:prose-lg xl:prose-xl">
    <nuxt-content :document="XXX" />
</div>

細かいカスタマイズ例　tableタグの見た目

マークダウンではこのような記述によってtableを作成できます。

| お肉 | コスパ(1~5) | 満足度(1~5) |
| :--- | :--- | :--- |
| もも肉 | 3 | 4 |
| むね肉 | 5 | 5 |
| なんこつ | 2 | 3 |

tableのスタイルを変更したい場合、@apply を使用します。 これを使用することで、cssからHTML要素に対してtailwindCSSのクラスを適用(apply)できます。 マークダウン出力を行うhtmlファイルのstyleタグに次のように記述します。

例）マークダウンによって出力されるtableタグに追加でtailwindcssのクラスを当てる場合

<style>
  .nuxt-content table {
    @apply table-auto text-xs md:text-sm;
  }
  .nuxt-content table th {
    @apply bg-blue-50 p-2 text-blue-900 font-extrabold;
  }
  .nuxt-content table td {
    @apply font-light;
  }
</style>

出力結果

結論

Tailwindcssを導入したけど、
マークダウンのスタイルどうしよう… ひとまず必要最低限のデザインでいいかな。

↓

tailwindcss-typographyをお試しあれ。