投稿したMDXをTailwindでスタイリングする。

『Next.jsのApp Routerで部品管理をして真ん中にMDXをはめる。』
の続きになります。前回は、部品化したヘッダとフッダとメインのMDX(Markdown)にわけて出力するところまで確認しました。
しかしMDX部分のスタイルシートがあたってなくてスタイリングは、mdx-components.tsxで
typescriptで直接記述する必要がありました。せっかくtailwindcssが入っているのでtailwindcssの標準のスタイルをあててtailwindcssで管理していきたいと思います。それでは、mdx-components.tsxでh1にスタイルをあてているのでコメントアウトします。

import type { MDXComponents } from 'mdx/types'

// This file allows you to provide custom React components
// to be used in MDX files. You can import and use any
// React component you want, including components from
// other libraries.

// This file is required to use MDX in `app` directory.
export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    // Allows customizing built-in components, e.g. to add styling.
   -   h1: ({ children }) => <h1 style={{ fontSize: "100px" }}>{children}</h1>,
   + //h1: ({ children }) => <h1 style={{ fontSize: "100px" }}>{children}</h1>,
    ...components,
  }
}

次に<prose>タグを使用して標準的な HTML に賢明なタイポグラフィ スタイルを追加できるようにするtailswindcss謹製プラグイン @tailwindcss/typographyをインストールします。

npm install @tailwindcss/typography

次にtailwind.congfig.tsにプラグインの設定をします。

import type { Config } from 'tailwindcss'

const config: Config = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-conic':
          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
      },
    },
  },
-  plugins: [],
+  plugins: [require("@tailwindcss/typography")],
}
export default config

それではMDXコンテンツ直下のフォルダ/blogのlayout.tsxに、proseタグを設定します。

src/app/blog/layout.tsx

export default function Layout({ children }: { children: React.ReactNode }) {
    return <article className="prose prose-xl">{children}</article>;
   }

それでは

npm run dev

にしてコンテンツのある

http://127.0.0.1:3000/blog/hello-world

をブラウザーをコピペして確認しましょう。

となり、markdown部分のmarkdownも無事、tailwindcssのデフォルトスタイルシートがあたるようになりました。
以上です。