在 Next.js 应用程序中安装 Tailwind css 后，MDX 样式 (next-mdx-remote) 失败

Question

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

我一直在关注 JetBrains WebStorm guide 来构建它，在这里他们使用 bootstrap 作为他们的 CSS 但我选择的 CSS 框架是顺风css.

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

Expected
What I Get 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/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;

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;

Answer 1

您可以将 content 更改为 purge 并将 require('@tailwindcss/typography') 添加到 tailwind.config.js 中的插件。然后要查看排版更改，您应该用名为 div.

的 prose 覆盖 <MDXRemote .../>

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>
      );
    };

...

在 Next.js 应用程序中安装 Tailwind css 后，MDX 样式 (next-mdx-remote) 失败

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

css

typescript

next.js

tailwind-css

mdxjs