Стилизация MDX (next-mdx-remote) завершается с ошибкой после установки Tailwind CSS в приложении Next.js. ⇐ CSS

[Anonymous]

Я использую next-mdx-remote, чтобы использовать MDX в своем проекте Next.js.
Чтобы создать это, я следовал руководству JetBrains WebStorm, вот они: Я использовал bootstrap в качестве CSS, но я выбрал CSS-фреймворк Tailwind CSS.
Дело в том, что когда я устанавливаю Tailwind CSS или любой другой CSS, основанный на Tailwind CSS, например Flowbite, страница 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 (


{/* [*] rel="stylesheet"
href="https://unpkg.com/@themesberg/flowbite@ ... te.min.css"
/> */}





);
}

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 (

{title}


);
};

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;


Подробнее здесь: https://stackoverflow.com/questions/705 ... next-js-ap