解决 Tailwind CSS Typography 表格对齐失效问题

在使用 Tailwind CSS 的 @tailwindcss/typography 插件（即 prose 类）渲染 Markdown 内容时，你可能会发现一个令人困扰的问题：Markdown 表格中的列对齐（左对齐、居中、右对齐）全都失效了，统一变成了左对齐。

本文将分析其背后的原因，并提供在 Tailwind CSS v4 中的最佳实践解决方案。

问题症状

在 Markdown 中，我们通常这样定义表格对齐：

| 左对齐 | 居中对齐 | 右对齐 |
| :--- | :----: | ----: |
| Text | Center | Right |

Markdown 解析器（如 Remark）会将这些对齐语法转换成 HTML 标签上的 align 属性：

<th align="right">右对齐</th>
<td align="right">Right</td>

然而，在 prose 容器下，这些 align 属性会被 CSS 强制覆盖，导致所有文字都贴向左侧（在 RTL 语言下是右侧）。

原因分析

这是由于 Tailwind Typography 插件为了保证样式的统一性，为 .prose 块内的 th 和 td 元素设置了默认的 text-align 样式。

在 CSS 层级中，显式的 CSS 属性优先级高于 HTML 的 align 属性。Typography 插件通常会应用类似 text-align: start 的样式，这使得浏览器忽略了 HTML 标签上的 align="right" 等指令。

在最新的 Tailwind CSS v4 中，由于其引入了更强大的选择器处理机制，传统的 CSS 覆盖有时会因为 :where() 选择器的特殊优先级而变得难以处理。

解决方案

解决这个问题的思路是：通过 Tailwind 的任意变体（Arbitrary Variants）重新捕获 HTML 的 align 属性，并使用 CSS 强制应用对应的对齐方式。

在你的 global.css 文件中，针对 .prose-fresh（或你的自定义 prose 类）添加以下 @apply 规则：

/* src/styles/global.css */
 
.prose-fresh {
    /* ... 其他配置 ... */
 
    /* 修复表格标题对齐 */
    @apply prose-th:[&[align=right]]:text-right!;
    @apply prose-th:[&[align=left]]:text-left!;
    @apply prose-th:[&[align=center]]:text-center!;
 
    /* 修复表格单元格对齐 */
    @apply prose-td:[&[align=right]]:text-right!;
    @apply prose-td:[&[align=left]]:text-left!;
    @apply prose-td:[&[align=center]]:text-center!;
}

关键点解析：

1. [&[align=right]]: 这是 Tailwind 的任意选择器语法，表示“选中当前元素自身且带有 align="right" 属性的标签”。
2. prose-th: / prose-td:: 这是 Typography 插件提供的元素修改器，专门用于修改 prose 内部的特定标签。
3. ! (Important): 在样式末尾加上 !（对应 !important），确保我们的对齐样式能够绝对覆盖插件默认的 text-align: start。

总结

通过这种方式，我们不仅解决了对齐失效的 Bug，还保持了代码的简洁性，完全遵循 Tailwind CSS v4 的设计哲学。

如果你也在使用 Astro、Next.js 或其他基于 Tailwind 的 Markdown 渲染方案，务必检查一下你的表格对齐是否正常。