How you are styling the mdx content?

[Chandraprakash-Darji]

I am trying to implement but this is the output

I also added the this css file of yours but still

import '@/styles/dracula.css';
import '@/styles/globals.css';
import '@/styles/mdx.css';

[theodorusclarence]

some of the styles in mdx.css are added to .prose.mdx

make sure to add class mdx and prose to the article

[Chandraprakash-Darji]

Both checks is done

  <article className='mdx prose mt-4 transition-colors'>
                <Component />
   </article>

Does giving a component to prop is necessary?

[theodorusclarence]

if you don't use any, I don't think so.

just to be clear, which part of the style are you trying to achieve?

[Chandraprakash-Darji]

Your site: My site:

Content Is copied

• added all css

  import '@/styles/dracula.css';
  import '@/styles/globals.css';
  import '@/styles/mdx.css';
  import '@/styles/nprogress.css';

• Packages I have added:

  "@types/nprogress": "^0.2.0",
  "clsx": "^1.2.1",
  "date-fns": "^2.29.3",
  "esbuild": "^0.17.3",
  "gray-matter": "^4.0.3",
  "mdx-bundler": "^9.2.1",
  "next": "^13.1.1",
  "nprogress": "^0.2.0",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-icons": "^4.7.1",
  "reading-time": "^1.5.0",
  "rehype-autolink-headings": "^6.1.1",
  "rehype-prism-plus": "^1.5.0",
  "rehype-slug": "^5.1.0",
  "remark-gfm": "^3.0.1",
  "tailwind-merge": "^1.8.1"

Any other thing I am mising?

[theodorusclarence]

have you add @tailwindcss/typography yet?

[Chandraprakash-Darji]

No?

[Chandraprakash-Darji]

Let me add

[Chandraprakash-Darji]

@theodorusclarence Thanks a lot for the help