Next.js中@tailwindcss/typography插件.prose类不生效问题排查

我在Next.js + Tailwind CSS项目中，需要用@tailwindcss/typography插件的.prose样式渲染博客页面的Markdown内容，但目前排版类完全没有生成，Markdown内容不受.prose影响。已经尝试过以下方法但无效：

• 多次重启开发服务器
• 重新安装node_modules依赖
• 清理npm和yarn缓存

相关代码内容 #

src/app/blogs/[slug]/page.tsx #

import MainLayout from "@/components/layouts/MainLayout";
import { BLOGS } from "@/dummy-data/blogs";
import ReactMarkdown from "react-markdown";

const BlogDetailPage = (
  { params, searchParams }: {
    params: { slug: string };
    searchParams?: { [key: string]: string | string[] | undefined };
  }
) => {
  
  const blog = BLOGS.find((blog) => blog.slug === params.slug);
  
  return (
    <MainLayout>
      <div className="">
        <div className="p-4 flex flex-col gap-2">
          <h1 className="text-3xl font-bold">
            {blog?.title}
          </h1>
          
          <article className="prose max-w-prose">
            <ReactMarkdown>
              {blog?.body || "### NO CONTENT"}
            </ReactMarkdown>
          </article>
          
        </div>
      </div>
    </MainLayout>
  );
};

export default BlogDetailPage;

tailwind.config.ts #

import type { Config } from 'tailwindcss'

const config: Config = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-conic':
          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
      },
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

export default config

global.css #

@tailwind base;
@tailwind components;
@tailwind utilities;


@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;

    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;

    --radius: 0.5rem;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;

    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;

    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;

    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: hsl(212.7,26.8%,83.9);
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

package.json #

{
  "name": "portfolio-fe",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@radix-ui/react-avatar": "^1.0.3",
    "@radix-ui/react-dropdown-menu": "^2.0.5",
    "@radix-ui/react-hover-card": "^1.0.6",
    "@radix-ui/react-separator": "^1.0.3",
    "@radix-ui/react-slot": "^1.0.2",
    "@radix-ui/react-tooltip": "^1.0.6",
    "@tailwindcss/typography": "^0.5.10",
    "@types/node": "20.5.0",
    "@types/react": "18.2.20",
    "@types/react-dom": "18.2.7",
    "@uiw/react-md-editor": "^3.23.5",
    "autoprefixer": "10.4.15",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.0.0",
    "lucide-react": "^0.268.0",
    "moment": "^2.29.4",
    "next": "13.4.16",
    "next-mdx-remote": "^4.4.1",
    "postcss": "8.4.28",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-icons": "^4.10.1",
    "react-markdown": "^8.0.7",
    "remark-gfm": "^3.0.1",
    "supports-color": "8.1.1",
    "tailwind-merge": "^1.14.0",
    "tailwindcss": "3.3.3",
    "tailwindcss-animate": "^1.0.6",
    "typescript": "5.1.6"
  },
  "devDependencies": {}
}

效果展示 #

如图所示，绿色标记的内容完全不受@tailwindcss/typography插件的.prose样式影响。

请问我是否遗漏了某些步骤，或者存在什么错误？

内容的提问来源于stack exchange，提问作者masadamsahid