Next.js と Tailwind CSS を使った Markdown 表示の実装

この記事では、Next.js と Tailwind CSS を使用して Markdown を表示する方法を説明します。前提として、Next.js と Tailwind CSS の環境が既にセットアップされていることを想定しています。

導入

以下のコマンドを使用して必要なパッケージをインストールします。

npm install react-markdown @tailwindcss/typography remark-gfm

パッケージ説明

react-markdown

React コンポーネントとして Markdown をレンダリングするライブラリです。Markdown を HTML に変換するための主要なツールとして使用します。

@tailwindcss/typography

Tailwind CSS のプラグインで、リッチテキスト（Markdown や記事コンテンツ）を美しく整えるためのスタイルを提供します。こちらのpluginを導入していないとtailwindcssのpurge機能が発生してmarkdownの表示がされない可能性が高いです。（必要なクラスをすでに使用していれば表示されます）

remark-gfm

GitHub Flavored Markdown (GFM) をサポートするためのプラグインです。テーブルやチェックボックスリストなど、拡張された Markdown 機能を使用する際に便利です。

サンプル実装

以下に、これらのパッケージを使用して Markdown を表示する簡単な例を示します。

import React from "react";
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";

export const MarkdownViewer = ({ content }) => {
  return (
    <div className="prose mx-auto">
      <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>
    </div>
  );
};

proseというcssクラスがtailwind typographyのクラスになります。こちらをつけることでmarkdownを綺麗に表示できます。（付けないとmarkdownが表示されない可能性があります。）

続いて、Tailwind Typography プラグインの有効化を行います。

tailwind.config.ts

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
+  plugins: [require("@tailwindcss/typography")],
};

これで、Next.js と Tailwind CSS を使って Markdown を美しく表示するアプリケーションを作成することができます！

Tips

proseを使うとmarkdownを表示する幅が狭くて広げたい場合があります。
そんな時はtailwind.config.tsに下記の設定を追加してみてください。

tailwind.config.ts

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
+      typography: {
+        DEFAULT: {
+          css: {
+            maxWidth: "100ch",
+          },
+        },
+      },
    },
  },
  plugins: [require("@tailwindcss/typography")],
};

defaultだとmaxWidth: "65ch"となっています。