Nuxt+Vue+Tailwind项目使用marked转换Markdown后部分样式异常问题

问题根源 #

该问题由Tailwind CSS默认内置的Preflight样式重置机制导致：Tailwind会默认清除所有HTML原生标签的默认样式，消除不同浏览器的样式差异，方便开发者统一自定义样式，因此h1~h6的默认字号、a标签的默认蓝色+下划线样式都会被抹除。
你项目中<em>斜体、<strong>粗体样式正常，是因为你全局样式或引入的第三方依赖中已经单独为这两个标签设置了样式规则，不属于Tailwind Preflight的例外情况。

解决方案 #

方案1：使用官方富文本样式插件（推荐） #

Tailwind官方提供了@tailwindcss/typography插件，专门用于处理富文本场景的默认样式，无需手动逐条写规则：

1. 安装插件

npm install @tailwindcss/typography

2. 在tailwind.config.js中注册插件

export default {
  // 其余配置保持不变
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

3. 在marked渲染的容器上添加prose类名即可自动生效

<template>
  <!-- 渲染marked转换后的HTML内容 -->
  <div class="prose" v-html="renderedMarkdown"></div>
</template>

你还可以通过prose-sm/prose-lg等类名调整全局富文本的大小，也可以自定义各类标签的样式规则。

方案2：自定义富文本容器样式 #

如果不需要完整的富文本样式，只想按需添加标题、链接的规则，可以手动给渲染容器加自定义类名，单独写样式：

1. 给渲染容器加自定义类名，例如markdown-content

<template>
  <div class="markdown-content" v-html="renderedMarkdown"></div>
</template>

2. 在全局CSS文件中添加对应规则，推荐写在@layer components下避免Tailwind打包时被 tree-shaking 移除

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

@layer components {
  .markdown-content h1 {
    @apply text-3xl font-bold my-4;
  }
  .markdown-content h2 {
    @apply text-2xl font-bold my-3;
  }
  /* 按需添加h3~h6的规则 */
  .markdown-content a {
    @apply text-blue-600 underline hover:text-blue-700;
  }
}

方案3：关闭Preflight重置（不推荐） #

如果不需要Tailwind的默认样式重置，可以在配置中直接关闭该功能，所有HTML原生标签的默认样式都会恢复：

// tailwind.config.js
export default {
  corePlugins: {
    preflight: false,
  },
}

该方案副作用较大，会导致项目所有原生标签的样式回归浏览器默认值，容易出现全局样式错乱，非特殊场景不建议使用。

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