I'm using Next.js 15 with Tailwind CSS V3 and the react-markdown package to render AI chat output inside a component.

I've customized the markdown rendering to replace all <h1>, <h2>, <h3> elements with styled <div>s using Tailwind classes to avoid default typography spacing issues.

Despite this, there’s still excessive vertical space between elements — particularly under h1, h2, and h3 replacements. I've tried removing all margin-bottom and adding mb-0, mt-0, etc., but spacing persists.

Here’s what it looks like (I’ve added debug background colors and annotations):

✅ What I’m using:

• Next.js 15
• React 19
• ReactMarkdown react-markdown@9
• Tailwind CSS v3
• Plugins:
  • remark-gfm
  • rehype-highlight

✅ Expected result:

Minimal vertical spacing between elements in the chat bubbles.

❌ Actual result:

Headings and their following content have unwanted gaps that don’t collapse.