Markdown MDX in Redwood

mdx-redwood.md

Installation and setup

yarn rw setup webpack
yarn workspace web add react-markdown @tailwindcss/typography

Now update webpack to load ".md"

// web/config/webpack.config.js

module.exports = (config, { env }) => {
  config.module.rules.push({
    test: /\.(md)$/i,
    use: [
      {
        loader: 'raw-loader',
      },
    ],
  })
  return config
}

And update tailwindcss configs

// web/config/postcss.config.js

module.exports = {
  plugins: [
    // ...
    require('@tailwindcss/typography'),
  ],
}

RESTART your dev server

Place your "text.md" next to your component, Then import it and use it like this:

import ReactMarkdown from 'react-markdown'
import markdownFile from './text.md'

const myComponent = () => {
  return (
    <>
      <ReactMarkdown className="prose" children={`${markdownFile}`} />
    </>
  )