CODEWITHSUNDEEP
csstypescriptnext.jstailwind-cssmdxjs
undefinedzack
undefinedzack

Reputation: 83

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/[email protected]/dist/flowbite.min.css"
        /> */}
      </Head>
      <Script src="https://unpkg.com/@themesberg/[email protected]/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;

Upvotes: 8

Views: 2667

Answers (2)

Raffles
Raffles

Reputation: 101

I managed to solve similar issue. Here's how I solve it.

Why don't I see any styling for the rendered markdown? In my global.css, there is a @tailwind base which resets the default css styling. This is why I don't see any styling for my rendered Markdown.

How do I solve this issue? In tailwind config, add this

plugins: [require("@tailwindcss/typography")],

In the html element that house the markdown, I add this class

<article className="prose lg:prose-xl">
{myMarkdownContent}
</article>

This solution comes from: https://github.com/tailwindlabs/tailwindcss-typography/blob/master/README.md

Upvotes: 0

Muhammed Yusuf
Muhammed Yusuf

Reputation: 86

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.

  • tailwind.config.js

    module.exports = {
      purge: [
        "./pages/**/*.{js,ts,jsx,tsx}",
        "./components/**/*.{js,ts,jsx,tsx}",
      ],
      theme: {
        extend: {},
      },
      plugins: [require('@tailwindcss/typography')],
    };
  • [blogId].tsx
...

            <div className="prose">
    
              <MDXRemote {...MDXdata} /> 
            </div>
        </div>
      );
    };

...

Upvotes: 7

Related Questions