如何阻止Tailwind覆盖Markdown默认间距与换行格式？

问题根因 #

这一问题是Tailwind默认的Preflight基础样式重置导致的，它会清空所有原生HTML元素的浏览器默认边距，包括Markdown解析生成的<p>标签默认上下外边距、<br>标签的默认间隙，最终导致段落挤在一起、行尾空格换行失效。

方案1：使用Tailwind官方排版插件（推荐） #

这是成本最低的方案，@tailwindcss/typography 插件专门用于还原富文本内容的原生排版规则，无需手动写样式：

1. 安装插件
   npm install @tailwindcss/typography
2. 在tailwind.config.js中注册插件

/** @type {import('tailwindcss').Config} */
module.exports = {
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

3. 在Eleventy模板中，给渲染Markdown内容的容器加上prose类，nunjucks模板写法参考：

<div class="prose max-w-none">
  {{ content | safe }}
</div>

插件会自动给段落、换行、列表、标题等元素加上符合排版规范的间距，完全匹配Markdown的默认渲染效果。

方案2：手动自定义样式覆盖 #

如果不想引入额外插件，可以自己给Markdown容器写专属样式：

1. 给渲染Markdown的容器加自定义类名：

<div class="markdown-content">
  {{ content | safe }}
</div>

2. 在全局CSS文件中添加对应规则：

/* 修复段落间距 */
.markdown-content p {
  margin: 1rem 0;
}
/* 修复行尾两个空格加回车生成的<br>换行无间隙问题 */
.markdown-content br {
  content: "";
  display: block;
  margin: 0.25rem 0;
}
/* 按需补充其他元素的样式，比如列表、引用等 */
.markdown-content ul, .markdown-content ol {
  margin: 1rem 0;
  padding-left: 1.5rem;
}

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

如果不需要Tailwind的全局样式重置，可以在tailwind.config.js中直接关闭Preflight：

module.exports = {
  corePlugins: {
    preflight: false,
  },
}

该方案会影响所有Tailwind元素的默认样式，可能导致其他组件样式异常，除非全局都不需要重置，否则不建议使用。

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