@tailwindcss/typography でマークダウンのスタイルを整えた①

本ブログは僕自身のアウトプットをする目的で始めましたが、ようやく重い腰をあげたということもあり、可能な限り記事を書くハードルを下げるモチベーションがありました。

そのため、別の記事でも記載したblog-starter-typescript というテンプレートを使用しています。

ただ、これでもコーディングを生業とするフロントエンドエンジニアの端くれなので、テンプレのままの見た目は嫌だなあと思っていました。

ブログ全体のレイアウトやUIは絶賛改修中なのですが、Tailwind CSS によりブラウザの標準スタイルがリセットされ、マークダウン記法が適切に表示されない問題がありました。
そのため、一足先に記事ページの文章だけは整えようということで、タイトルにもあるtailwindcss-typography を使用することにしました。

The official Tailwind CSS Typography plugin 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.

Tailwind の公式 CSS Typography プラグインは、Markdown からレンダリングされた HTML や CMS から取得した HTML など、あなたがコントロールできない任意のバニラ HTML に美しいタイポグラフィーのデフォルトを追加するために使用できる散文クラスのセットを提供します。
引用：https://tailwindcss.com/docs/typography-plugin

日本語はDeepL翻訳に突っ込んだのでぐちゃぐちゃですが、要は「Tailwindが公式で綺麗な見た目のテンプレをプラグインで用意したよ」ということです。めちゃくちゃ便利ですね。

導入は簡単です。コマンドを実行し、tailwindの設定ファイルでプラグインを読み込みます。

パッケージインストール

yarn add --dev @tailwindcss/typography
 or
npm install --save-dev  @tailwindcss/typography

tailwind.config.js

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

使い方としては、prose というクラスをマークダウンのラッパー要素のHTMLに追記するだけです。

post.tsx

<article class="prose">
  {{ markdown }}
</article>

サイズ修飾子やカラー修飾子などもあります。

ここまで書いて限界を迎えたため、詳細は次の記事で書こうと思います。。。