Next.jsでmdxの要素にTailwind CSSのスタイルを適用させる方法のご紹介。

2024-01-28

はじめに

Mdxはマークダウン記法ができる、マークダウンの拡張形式です。
jsxを埋め込むことができ、柔軟にカスタマイズすることができます。

何かしらのUIやスタイルのフレームワークを使用している場合、マークダウンからレンダリングしてHTMLを生成しても、その生成された要素にスタイルが割り当たらないことがあります。

また、Tailwindなどのフレームワークを使ってデザインを作成している場合、マークダウンの部分のみデザインが異なるみたいな事案が発生します。

これを防ぐために、mdxにもスタイルを割り当てたいです。
今回は、Tailwind CSSを使用したケースでの手法になりますが、bootstrap等でも同じ対処が行える認識です。

環境

Next.js：14.0.3
tailwindcss
@next/mdx

手順

mdxWrapper.tsx

"use client"
import dynamic from 'next/dynamic';
import { NextPage } from 'next';

type Props = {
  prop: string
}

const MdWrapper: NextPage = ({ prop }) => {
  const mdxPath = `${prop}.mdx`;
  const Md = dynamic(() => import(`@/component/mdx/${mdxPath}`));

  return (
    <div className="mdxWrapper">
      <Md />
    </div>
  );
}

export default MdWrapper;

mdxを囲う要素を作成しました。layoutなどでも問題ないと思います。
そして、mdxWrapperというクラスを親要素に追加しました。

mdx.tsx

# hello

h1指定の「hello」を記したmdxファイルをcomponent/mdx配下に作成しました。

page.tsx

mdxWrapperを読み込むページを作成します。

<MdRelay prop={"mdx"} />

上記によって、レンダリング後は、

<h1>hello</h1>

という要素が出来上がります。

これに対して、Tailwind.cssを割り当てましょう。

globals.css

@applyは、Tailwind CSSの機能で、cssなどのファイル内でTailwindの独自クラスを割り当てすることのできるディレクティブです。

下のように記すことで、h1にTailwindのクラスが割り当てられ、スタイルが変更されます。

.mdxWrapper > h1 {
  @apply text-base font-bold leading-6;
}

画像のサイズ変更もできる

同じ手法を使えば、画像サイズの指定もできます。

.mdxWrapper img {
  margin: 10px auto;
  width: 60%;
  max-width: 350px;
  @apply border border-gray-300 rounded-md;
}

おわりに

mdxファイル内にも直接HTMLを書き込めたり、jsxを追加できますが、
不必要な場面では、極力使用を避けたいと思っています。

変数を埋め込んだり、という場面では是非とも使用したいですが、
スタイルのためだとか、画像サイズのために色々mdxファイルに書き込んでしまうと、
マークダウンの手軽さが失われてしまいます。

今回は、mdxをwrapする要素にクラスを割り当てmdx内要素のスタイルを変更しました。
mdxの複雑化を下げられ、かつシンプルに実装することができます。

他に良い方法があればご教授いただきたいです。
（画像サイズなどは、直接記したいところです。

(alt name)[file path]{width:xxx}

のような形で記せれば、個人的にはありがたいです。