Next.js+Tailwind项目中Markdown渲染异常的排查求助

嘿，我看你这情况挺典型的——明明markdown-it已经把Markdown正确转成HTML了（控制台输出的标签都对），但页面上就是没按预期渲染，甚至像纯文本一样？结合你的代码和描述，我帮你捋几个大概率的排查方向：

• 先检查Tailwind Typography插件是否正确配置
  你用了prose类，但很多人容易忽略：这个类是Tailwind Typography插件提供的，必须先在tailwind.config.js里注册插件才能生效！如果没加，prose就是个无效类，浏览器只会用默认样式渲染那些HTML标签，自然看起来和纯文本没区别。
  打开你的tailwind.config.js，确认插件部分是这样的：

  /** @type {import('tailwindcss').Config} */
  module.exports = {
    content: [
      "./app/**/*.{js,ts,jsx,tsx,mdx}",
      "./pages/**/*.{js,ts,jsx,tsx,mdx}",
      "./components/**/*.{js,ts,jsx,tsx,mdx}",
    ],
    plugins: [
      require('@tailwindcss/typography'), // 这行必须要有！
    ],
  }
  

• 检查代码里的小细节问题
  你的代码里有个奇怪的地方：params = await params——在Next.js的App Router异步页面组件里，params是路由参数，不需要await的，这步多余的操作可能不会直接导致渲染问题，但容易引发数据时序的潜在问题，建议删掉，直接用const post = await getPosts(params.slug);。
  另外，className="mt-30"也是个无效的Tailwind类（Tailwind的margin取值范围是mt-0到mt-96，自定义值要用mt-[120px]这种写法），改成有效的值比如mt-10，避免布局异常干扰样式渲染。

• 用开发者工具排查样式问题
  打开浏览器的Elements面板，找到你渲染Markdown的<div class="prose">元素，看看里面的<p>、<ul>、<strong>这些标签有没有应用到prose相关的样式：

  • 如果没有，说明prose类没被识别，回到第一步确认插件配置；
  • 如果有样式但还是不对，可能是你自定义的全局样式（比如全局的p标签样式）覆盖了prose的样式，这时候可以用prose !important或者调整选择器优先级试试。

• 最小化测试排除干扰
  把页面简化到最核心的渲染逻辑，去掉NavBar、返回链接这些组件，看看能不能正常渲染：

  export default async function Post({ params }) {
    const md = new MarkdownIt({
      html: true,
      breaks: true,
      typographer: true,
    })
    const post = await getPosts(params.slug);
    const htmlConvert = md.render(post.content.trim())
    return (
      <main>
        <article>
          <h1>{post.title}</h1>
          <div className="prose mx-auto" dangerouslySetInnerHTML={{ __html: htmlConvert }} />
        </article>
      </main>
    )
  }
  

  如果这样能正常渲染，再逐步加回其他组件，排查是哪个部分的样式或逻辑干扰了渲染。

内容来源于stack exchange