MDX with NextJS & Tailwind

[orrymr]

Hey all,

I've been trying to get MDX working with NextJS + Tailwind, following this guide.
I started a fresh NextJS project, and followed the instructions.

My first issue was that mdx-components.tsx didn't work when I put it in the /app directory. I had to put it one level up.

Secondly, I changed my page.tsx file to page.mdx, and provided some markdown:

# This is intro

- this
- is 
- a
- list

But the result looks pretty bad:

Any idea what I'm doing wrong here?

[ChristianMurphy]

My first issue was that mdx-components.tsx didn't work when I put it in the /app directory. I had to put it one level up.

That is next.js specific, raise this with them

But the result looks pretty bad:

Yep, the tailwind defaults are atrocious.
It's a regular question https://github.com/orgs/mdx-js/discussions?discussions_q=is%3Aopen+tailwind

The answer is to use tailwind prose for better defaults https://dev.to/adamof/introduction-to-the-prose-class-that-instantly-beautifies-articles-tailwindcss--bn7

[orrymr]

Aha - so it seems MDX simply creates your <h1>, <h2>, <ul>, etc.. elements out of the markdown.
But it does not have anything to do with the styling!

@tailwind base removes all of the styling.