Can't render mdx correctly

[floyergilmour]

I have a vite/react/shadcn app in a monorepo that can't seem to render mdx files correctly

import {MDXProvider} from "@mdx-js/react";

export function StyledMarkdown(props: { children: React.ReactNode }) {
  return (
    <div className="prose-sm md:prose">
      <MDXProvider>
        {props.children}
      </MDXProvider>
    </div>
  )
}

the component where I read the mdx file

import Content from "./about-us.mdx"

function AboutUs() {
  return (
        <Card>
          <CardHeader/>
          <CardContent>
            <Content/>
          </CardContent>
          <CardFooter/>
        </Card>
  )
}

export default AboutUs

the mdx file

about-us.mdx
# Hello
world

vite.config.ts file

import { defineConfig } from 'vite'
import viteReact from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
import mdx from "@mdx-js/rollup"
import path from "path"

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    viteReact(),
      {
        enforce: "pre",
        ...mdx({
          /* jsxImportSource: …, otherOptions… */
        })
      },
      tailwindcss(),
    ],
  test: {
    globals: true,
    environment: 'jsdom',
  },
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})

No amount of "#" gives me headings.
BOLD text seems to work

• Bullet points don't work either

What could be the issue here?

[ChristianMurphy]

This feels like another duplicate of https://github.com/orgs/mdx-js/discussions/2568

Right click on the rendered HTML, if there is an <h2> there, then fix your CSS.
Tailwind suppresses the styles for most default HTML elements, make sure the prose styles are being applied.

[floyergilmour]

Ah thanks. I realised I was using Tailwind v4 but had installed the tailwind typography plugin like you do in v3. After I installed it like

@import "tailwindcss";
@import "@repo/ui/globals.css";
@plugin '@tailwindcss/typography';
:root {
    --background: oklch(0.9820 0.0041 91.4458);
    --foreground: oklch(0 0 0);
    ....

everything works