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

この記事は約4分で読めます。

スポンサーリンク

はじめに

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のクラスが割り当てられ、スタイルが変更されます。

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

 

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

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

.mdWrapper 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}

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

 

コメント

スポンサーリンク
スポンサーリンク
タイトルとURLをコピーしました