I've integrated MDX into my Next.js project using next-mdx-remote.
While following JetBrains WebStorm's detailed tutorial on building a blog with MDX, they utilized Bootstrap for styling. However, I opted for Tailwind CSS as my preferred CSS framework.
The issue arises when I install Tailwind CSS or any other CSS based on it like FlowBite, causing the MDX page to lose its styling.
Expected Result:
Actual Outcome after adding Tailwind
- tailwind.config.js
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
};
- _app.tsx
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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d7b1bbb8a0b5bea3b297e6f9e5f9e7">[email protected]</a>/dist/flowbite.min.css"
/> */}
</Head>
<Script src="https://unpkg.com/@themesberg/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1e787271697c776a7b5e2f302c302e">[email protected]</a>/dist/flowbite.bundle.js" />
<Nav />
<Component {...pageProps} />
</>
);
}
export default MyApp;
- globals.css
@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;
}
- [blogId].tsx
// 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;