MDX not rendering properly when using Next.js with TypeScript and Tailwind CSS

[hbhutta]

Hi! I asked a very similar question on the remarkjs GitHub repository and got very detailed help from the repository owners. At that time I was having this same problem, but I was using the deprecated npx create-react-app utility alongside Tailwind and someone suggested that that was causing it and I should switch to a React framework with an up-to-date build utility.

So I'm using Next.js now, with Tailwind and TypeScript. I am trying to render some MDX pages. I am using the Pages router and my project structure looks like this:

I followed the official tutorial by Next.js here, but the MDX is still not rendering properly (e.g. headers are not the expected size, no code blocks, etc..).

Here is my next.config.js:

const withMDX = require('@next/mdx')()
 
/** @type {import('next').NextConfig} */
const nextConfig = {
  // Configure `pageExtensions`` to include MDX files
  pageExtensions: ['js', 'jsx', 'mdx', 'ts', 'tsx'],
  // Optionally, add any other Next.js config below
}
 
module.exports = withMDX(nextConfig)

My tailwind.config.ts also accommodates .mdx files:

import type { Config } from 'tailwindcss'

const config: Config = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  plugins: [],
}
export default config;

Running npm list shows that I have all the necessary packages (all installed with zero vulnerabilities):

I also checked the Next.js repository for a similar issue someone was having with MDX and Tailwind, but they resolved it because they only had a typo somewhere. I don't have any typos anywhere as far as I can tell.

So what could be preventing the MDX files from rendering properly?

[ChristianMurphy]

Hey @hbhutta! 👋
This was at least partially addressed in your last question https://github.com/orgs/remarkjs/discussions/1252#discussioncomment-7405197
Some solutions from other previous questions with solutions which may help you:

• Some Markdown elements do not render remarkjs/react-markdown#505 (comment)
• https://github.com/orgs/remarkjs/discussions/681#discussioncomment-597356

[ChristianMurphy]

So, just to understand, MDX doesn't style .mdx files by default?

It does not.
It generates HTML, without any additiinal styles/CSS.

I was expecting something like this

The MDX website includes a CSS theme, you can try to add the some one to your site if you'd like (it may conflict with tailwind though).
This is the CSS file from the MDX site: https://github.com/mdx-js/mdx/blob/85c5dd058ae2545c82f3b8b64129ad7974d84a90/docs/_asset/index.css

[hbhutta]

Ah, that clarifies things. I'm very sorry for taking up so much of your time Christian. I was under the assumptions that all the styling would be done for me! I'll take a look at the MDX website's theme.

Thank you so much for your help -- it looks like I have a lot of learning to do!

I'll close the discussion.

[hbhutta]

Hi Christian, I'm sorry for opening the discussion again. I am looking through the mdx.js page, but I cannot find anything on styling other than what I found on the Nextjs page. I just want to know how I apply the styles on the mdx files. I downloaded this .css file but do I have to convert all of that into things like this in my mdx-components.tsx file?:

import type { MDXComponents } from 'mdx/types'
 
// This file allows you to provide custom React components
// to be used in MDX files. You can import and use any
// React component you want, including inline styles,
// components from other libraries, and more.
 
export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    // Allows customizing built-in components, e.g. to add styling.
    h1: ({ children }) => <h1 style={
        {
            fontWeight: '700',
            letterSpacing: '0.0125em'
        }
    }>{children}</h1>,

    pre: ({children}) => <pre style={
        {
            fontSize: 'smaller',
            fontFeatureSettings: 'normal',
            lineHeight: 'calc(1em + (1 / 0.8 * 1ex))'
        }
    }>{children}</pre>,
    ...components,
  }
}

Because doing this for each HTML-MDX element mapping would be tedious, right?

[ChristianMurphy]

How styles are applied to the page is handled by Next.js
You can read their documentation https://nextjs.org/docs/pages/building-your-application/styling/css-modules#external-stylesheets
and ask their community https://nextjs.org/docs/community

The MDX community is not Next.js support.