Next.js Discord

Discord Forum

Styling MDX with plugin

Answered
Saltwater Crocodile posted this in #help-forum
Open in Discord
Saltwater CrocodileOP
Heyhey! I’m adding an mdx based blog to my website (v14, Tailwind). Mdx rendering works, but it’s without any applied styles! Is there a plugin that I can use to apply styling? I’m quite confused about remark vs rehype and what they are for / capable of rn
Answered by Saltwater Crocodile
When you add Tailwind to your project, all css is removed. This is true for MDX too. If I edit my mdx-components.tsx like this:

import type { MDXComponents } from "mdx/types";

export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    h1: ({ children }) => <h1 className="text-3xl">{children}</h1>,
    ...components,
  };
}


then it only works if mdx-components.tsx is added to components in the tailwind-config.

But there is an even easier way, which is to use @tailwindcss/typography. This is basically what I was looking for. Now my layout.tsx for the .mdx-subroutes looks like this:

export default function RootLayout({ children }: PropsWithChildren) {
  return (
    <article className="prose mx-auto dark:prose-invert">{children}</article>
  );
}
View full answer

12 Replies

B33fb0n3
You can use this markdown library serverside to apply styles: https://nextjs.org/docs/app/building-your-application/configuring/mdx
@Saltwater Crocodile
Saltwater CrocodileOP
Do you mean via the mdx-components.tsx? I had hoped there was a less manual way, hence the title. Basically what I had hoped for was something like „use this plugin and your mdx will be styled in a sensible way“
install the plugin and use it
Saltwater CrocodileOP
Hm… no styles for me. I guess that’s because I use tailwind, as stated in the OP. Any recommendations for my situation?
minimum this is supported: https://www.markdownguide.org/cheat-sheet/#basic-syntax
Saltwater CrocodileOP
When you add Tailwind to your project, all css is removed. This is true for MDX too. If I edit my mdx-components.tsx like this:

import type { MDXComponents } from "mdx/types";

export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    h1: ({ children }) => <h1 className="text-3xl">{children}</h1>,
    ...components,
  };
}


then it only works if mdx-components.tsx is added to components in the tailwind-config.

But there is an even easier way, which is to use @tailwindcss/typography. This is basically what I was looking for. Now my layout.tsx for the .mdx-subroutes looks like this:

export default function RootLayout({ children }: PropsWithChildren) {
  return (
    <article className="prose mx-auto dark:prose-invert">{children}</article>
  );
}
Answer
Saltwater CrocodileOP
You mean this? https://tailwindcss.com/docs/preflight#disabling-preflight

I'd argue that would be a bad approach, because then multiple styling-tools are fighting each other. You'll always wonder where a particular style is coming from. The most negative experience I had with this was a project that used css, material-ui, styled-components and inline-styles. We eventually settled on doing everything with material-ui, because of all the headaches the mishmash caused
B33fb0n3
Yea I mean that. I think that’s a good approach to trust one styling system. For me I want to use the browser styling. I change the font family, the color, maybe the size and the rest does the browser. So I have less work 🙂