Yamamoto Iroha Official Site

GatsbyでMDXにtailwindCSSを適用しようとして詰まった話

GatsbyにtailwindCSSを導入した場合、デフォルトではマークダウンのスタイリングがまっさらになってしまう。

調べてみるとマークダウン記法に合わせたスタイリングをコンポーネントに定義して
MDXProviderに渡すとよいとあるのだが、試してみるとエラーが出てうまく適用できない。
参考リンク：Gatsby + Tailwind CSSでmdxをスタイリングする

どうやらgatsby-plugin-mdxのバージョンによって挙動が異なるらしい。
以下のように修正することで回避可能。
参考リンク：MDXRenderer is not working

before

export default function BlogPost({ data, pageContext}) {
    <MDXProvider components={MDXComponents}>
        <MDXRenderer>
            {data.mdx.body}
        </MDXRenderer>
    </MDXProvider>
}

after

export default function BlogPost({ data, pageContext, children}) {
    <MDXProvider components={MDXComponents}>
        {children}
    </MDXProvider>
}

このようにMDXRendererを介さず直接MDXProviderに渡すことでエラーを回避できる。
どこからともなくchildrenが現れたが、gatsby-node.jsで渡すcomponentを以下のようにすることで取得可能。

before

// 記事の個別ページを作成
const postTemplate = path.resolve(`./src/templates/blog-post.js`)
posts.forEach(({ node }) => {
    createPage({
      path: node.fields.slug,
      component: postTemplate,
    })
})

after

// 記事の個別ページを作成
const postTemplate = path.resolve(`./src/templates/blog-post.js`)
posts.forEach(({ node }) => {
    createPage({
        path: node.fields.slug,
        component: `${postTemplate}?__contentFilePath=${node.internal.contentFilePath}`,
    })
})

自分も何故こうなるのか具体的には理解できていないので細かな理屈は省略。
chatGPTに質問してもバージョンが絡むせいか正確な答えが得られず
エラー文もわかりづらくて結構ハマったので備忘録代わりに。