1

我正在使用next-mdx-remote在我的 Next.js 项目中使用 MDX。

我一直在遵循 JetBrains WebStorm指南来构建它，这里他们使用 bootstrap 作为他们的 CSS，但我选择的 CSS 框架是 tailwind css。

问题是当我安装 tailwind css 或任何其他基于 tailwind css（如flowbite）的 CSS 时，MDX 页面失去了它的样式。

预期
添加顺风后我会得到什么

  • 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/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;
  • 全局的.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;
4

1 回答 1

1

您可以更改content并purge添加require('@tailwindcss/typography')到tailwind.config.js. 然后要查看排版更改，您应该<MDXRemote .../>使用prose命名的 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>
      );
    };

...
于 2022-01-14T10:24:34.810 回答