The styles on Markdown are not being applied

[gianpaj]

The Tailwind classes being set for the different markdown HTML/elements are not working.

ai-chatbot/components/markdown.tsx

Lines 52 to 57 in dfc07ce

	h1: ({ node, children, ...props }) => {
	return (
	<h1 className="text-3xl font-semibold mt-6 mb-2" {...props}>
	{children}
	</h1>
	);

I attempted to reproduce the issue in a smaller repo so we can determine whether the implementation in AI-Chatbot is wrong or is causing the problem.

https://stackblitz.com/edit/prosemirror-react-markdown-qbtuvdd3?file=src%2FApp.tsx

[gianpaj]

If you console.log({ stringFromMarkdown }) in the buildDocumentFromContent() function we do see the HTML elements with classes

{
    "stringFromMarkdown": "<h1 class=\"text-3xl font-semibold mt-6 mb-2\">title</h1>\n<p><span class=\"font-semibold\">bold</span></p>\n<h2 class=\"text-2xl font-semibold mt-6 mb-2\">heading2</h2>"
}

and if you change the <h1> being returned in the components to an <h5> it does change it...

  h1: ({ node, children, ...props }) => {
    return (
      <h5 className="text-3xl font-semibold mt-6 mb-2" {...props}>
        {children}
      </h5>
    );
  },