Tailwind文本对齐与排版优化技巧

Tailwind CSS 默认并不支持 `text-justify` 类，所谓“两端对齐”功能需手动在配置中扩展 `textAlign` 才能启用，但即便如此，`text-align: justify` 对中文排版效果极差——易导致标点悬出、字距突兀、河流效应，且在主流浏览器及移动端 WebView 中兼容性堪忧；与其强行使用不稳定的 `text-justify`，不如优先采用内置的逻辑类 `text-start`/`text-end` 保障方向健壮性，或通过控制容器宽度（如 `max-w-prose`）配合左对齐实现更自然、更可靠的中文阅读体验——这不仅是技术取舍，更是面向真实用户场景的排版理性。

text-justify 在 Tailwind 中根本不存在

Tailwind CSS 官方并不提供 text-justify 这个类。你搜到的所谓“text-justify”要么是旧版文档残留、第三方插件，要么是混淆了 CSS 原生属性和 Tailwind 的命名逻辑。

原生 CSS 的 text-align: justify 确实存在，但 Tailwind 默认只暴露了 text-left、text-center、text-right、text-justify（⚠️注意：这是个常见误解）——实际上，text-justify 并不在默认配置中，连 v3.4 的源码里都找不到它。

所以如果你写了 text-justify 却没生效，不是你写错了，是它压根没被定义。

怎么让文字真正两端对齐（justify）

必须手动扩展 Tailwind 配置，把 text-align: justify 显式加进去。否则不管你怎么试，text-justify 都不会生成对应 CSS 规则。

• 打开 tailwind.config.js
• 在 theme.extend 下添加 textAlign 扩展项
• 确保该配置项启用（有些项目用的是 content 路径未覆盖到新类，导致 JIT 模式下不生成）

示例配置：

module.exports = {
  theme: {
    extend: {
      textAlign: {
        'justify': 'justify',
      }
    }
  }
}

之后就能安全使用 text-justify 类了——但它现在是你自己加的，不是 Tailwind 内置的。

justify 对中文排版的实际效果很有限

两端对齐在英文里靠空格拉伸实现，而中文没有天然词间空格，浏览器只能靠「字距微调」或「标点挤压」来凑齐行宽，结果常常是标点悬出、字间距突兀、甚至出现难看的「河流效应」。

• Chrome 和 Safari 对中文 text-align: justify 支持不一致；Firefox 表现略好但仍有断行问题
• 移动端 WebView（尤其 Android）基本忽略中文 justify 行为
• 若内容含大量数字、英文单词或混合排版，justify 可能强行撑开中英文间隙，视觉割裂感更强

真要追求整齐，更稳妥的做法是用 text-left + 控制每行字数（如通过 max-w-prose 或媒体查询限制宽度），而非强求 justify。

替代方案：用 text-start / text-end 避免方向陷阱

如果你实际想解决的是 RTL（右向左）语言或响应式文本方向适配，text-left 这类固定方向类反而容易翻车。Tailwind 提供了逻辑属性支持：

• text-start → 对应 text-align: start，在 LTR 下等价于 text-left，RTL 下自动变成 text-right
• text-end 同理，比硬写 text-right 更健壮
• 这些类是内置的，无需额外配置，且兼容性比 text-justify 好得多

除非设计稿明确要求印刷级两端对齐，且已确认目标环境（含微信 WebView、钉钉内嵌页等）表现可控，否则别轻易开启 justify —— 它不是排版银弹，而是需要逐场景验证的特殊处理。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《Tailwind文本对齐与排版优化技巧》文章吧，也可关注golang学习网公众号了解相关技术文章。