Can't display markdown on NEXTJS

Haloo, hope you have a great day!

I'm in the middle of learning something about markdown on react, i already success using react markdown editor, but now, when i want to display it, i got stuck, i'm using react-markdown and NEXTJS, and here's the problem:

importing the library:

const ReactMarkdown = dynamic(
  () => import("react-markdown").then((mod) => mod.default),
  { ssr: false }
);
const rehypeRaw = dynamic(
  () => import("rehype-raw").then((mod) => mod.default),
  { ssr: false }
);
const remarkGfm = dynamic(
  () => import("remark-gfm").then((mod) => mod.default),
  { ssr: false }
);

i have markdown look like this:

const [value, setValue] = useState("# A demo of `react-markdown`");

and this is my div

<div className="container mx-auto px-0 lg:px-40 pt-6 pb-8 sm:pt-14 sm:pb-16 md:pt-14 md:pb-16 min-h-screen">
        <ReactMarkdown
          children={value}
          remarkPlugins={[remarkGfm]}
        />
</div>

and when i refresh my page, i got this:

that's not H1, and the code tag seems didn't work, BUT when i'm using bold:

const [value, setValue] = useState("# A **demo** of `react-markdown`");

the bold is being display..

and at this point, idk why this happend, can somebody help me?

It looks like you're using TailwindCSS, the default styles for elements are reset, that's why the h1 text will look like any other text.

You can use @tailwindcss/typography to counter this.

Just add the plugin to your tailwindcss.config.js file

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

And use the prose classes on the HTML elements

<div className="prose ...">(...)</div>

Also, using Next.js dynamic imports, you don't have to use the then syntax to get the default module.

const ReactMarkdown = dynamic(() => import("react-markdown"), { ssr: false });

This snippet should give you the same as importing the default module. Only use the then when you want to import a particular export