csstypescriptnext.jstailwind-cssmdxjs

MDX styling (next-mdx-remote) fails after I install Tailwind css in a Next.js app


I'm using next-mdx-remote to make use of MDX in my Next.js project.

I've been following JetBrains WebStorm guide to build this, here they've used bootstrap as their CSS but my choice of CSS framework was tailwind css.

The thing is when I install tailwind css or any other CSS based on tailwind css like flowbite, the MDX page loses it's styling.

Expected
What I Get after adding tailwind

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};


import "../styles/globals.css";
import type { AppProps } from "next/app";
import Head from "next/head";
import Script from "next/script";
import Nav from "../components/Nav";

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <Head>
        {/* <link
          rel="stylesheet"
          href="https://unpkg.com/@themesberg/flowbite@1.2.0/dist/flowbite.min.css"
        /> */}
      </Head>
      <Script src="https://unpkg.com/@themesberg/flowbite@1.2.0/dist/flowbite.bundle.js" />
      <Nav />
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;
@tailwind base;
@tailwind components;
@tailwind utilities;

html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}
// import fs from "fs";
import matter from "gray-matter";
import path from "path";
import { serialize } from "next-mdx-remote/serialize";
import { MDXRemote } from "next-mdx-remote";

import { connectToDatabase } from "../../utils/mongodb";
import { ObjectId } from "mongodb";

const BlogPg = ({ frontMatter: { title }, MDXdata }) => {
  return (
    <div className="px-5 md:px-80 py-10">
      <p className="text-5xl mb-4">{title}</p>
      <MDXRemote {...MDXdata} />
    </div>
  );
};

export const getStaticPaths = async () => {

  let { db } = await connectToDatabase();

  const posts = await db.collection("blogs").find({}).toArray();

  const paths = posts.map((post) => ({
    params: {
      blogId: post._id.toString(),
    },
  }));

  return {
    paths,
    fallback: false,
  };
};

export const getStaticProps = async ({ params: { blogId } }) => {
  // const fileContent = fs.readFileSync(
  //   path.join("posts", blogId) + ".mdx",
  //   "utf-8"
  // );

  let { db } = await connectToDatabase();

  const post = await db
    .collection("blogs")
    .find({ _id: new ObjectId(blogId) })
    .toArray();

  const { data: frontMatter, content } = matter(post[0].text);
  const MDXdata = await serialize(content);

  return {
    props: {
      frontMatter,
      blogId,
      MDXdata,
    },
  };
};

export default BlogPg;

Solution

  • You may change content to purge and add require('@tailwindcss/typography') to plugins in tailwind.config.js. And then to see typography changes you should cover your <MDXRemote .../> with a prose named div.

    
        module.exports = {
          purge: [
            "./pages/**/*.{js,ts,jsx,tsx}",
            "./components/**/*.{js,ts,jsx,tsx}",
          ],
          theme: {
            extend: {},
          },
          plugins: [require('@tailwindcss/typography')],
        };
    
    
    ...
    
                <div className="prose">
        
                  <MDXRemote {...MDXdata} /> 
                </div>
            </div>
          );
        };
    
    ...