react-markdown-tailwind-components.js

const markdownComponents = {
  code: CodeBlock, // look up how to use Syntax Highlighter etc, this gist is really just for the rest of the elements
  p: ({ children }) => <p className='py-2'>{children}</p>,
  // li: ({ children }) => <li className='list-disc ml-6'>{children}</li>,
  h1: ({ children }) => <h1 className='text-2xl font-bold py-2'>{children}</h1>,
  h2: ({ children }) => <h2 className='text-xl font-bold py-2'>{children}</h2>,
  h3: ({ children }) => <h3 className='text-lg font-bold py-2'>{children}</h3>,
  h4: ({ children }) => <h4 className='text-base font-bold py-2'>{children}</h4>,
  h5: ({ children }) => <h5 className='text-sm font-bold py-2'>{children}</h5>,
  em: ({ children }) => <em className='italic'>{children}</em>,
  strong: ({ children }) => <strong className='font-bold'>{children}</strong>,
  del: ({ children }) => <del className='line-through'>{children}</del>,
  ul: ({ children }) => <ul className='list-disc ml-6'>{children}</ul>,
  ol: (props) => <ol className='list-decimal ml-6' start={props.start || ""}>{props.children}</ol>,
  blockquote: ({ children }) => <blockquote className='border-l-4 pl-4'>{children}</blockquote>,
  a: ({ children, href }) => <a href={href} className='text-blue-500 hover:underline'>{children}</a>,
  // https://flowbite.com/docs/components/tables/
  table: ({ children }) => <table className='w-full text-sm text-center text-gray-500 dark:text-gray-400 border'>{children}</table>,
  thead: ({ children }) => <thead className='text-xs uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400'>{children}</thead>,
  th: ({ children }) => <th className='p-2 text-gray-300 '>{children}</th>,
  td: ({ children }) => <td className='p-2 border bg-gray-100 text-gray-900'>{children}</td>,
}

const markdownJSX = <ReactMarkdown components={markdownComponents} remarkPlugins={[remarkGfm]} >
  {markdownText}
</ReactMarkdown>

🔥