text-justify 类默认不存在，需手动在 tailwind.config.js 的 theme.extend.textalign 中配置；中文两端对齐效果差，原生 justify 依赖空格拉伸，不适用于无词距的中文，易致标点悬出、字距失衡；nativewind 中虽可用但行为与 web 不同；替代方案更可控。
text-justify 类默认不存在，必须手动扩展配置
你在 HTML 里写 text-justify 却没生效？不是你漏写了 class，是 Tailwind 根本没定义它。v3.4 源码里查不到这个 key，官方文档也从未将其列为内置类——所有“text-justify 可用”的示例，要么来自旧版残留、第三方插件，要么是开发者自己加的。
要让它真正起作用，必须修改 tailwind.config.js：
module.exports = {
theme: {
extend: {
textAlign: {
'justify': 'justify',
}
}
}
}
- 确保该配置在
theme.extend下，而非顶层theme.textAlign（后者会覆盖全部默认值） - 若使用 JIT 模式，确认
content路径已包含使用text-justify的文件，否则类不会被生成 - 重启开发服务器或重新构建，否则变更不生效
中文两端对齐效果差，别盲目依赖 text-align: justify
原生 text-align: justify 是为英文设计的：靠拉伸单词间空格实现对齐。中文无天然词间空格，浏览器只能强行调整字距或挤压标点，结果常是：
- 句末标点悬出容器边缘（尤其全角逗号、句号）
- 某一行字距突然变大，形成难看的“视觉河流”
- 移动端 Safari 对
text-justify支持极弱，甚至完全忽略
如果你真需要中文段落两端对齐，优先考虑：text-start + 控制容器宽度 + 合理断行；或改用 text-justify 配合 hyphens: auto（仅限支持连字符的语言）。
NativeWind 中 text-justify 是可用的，但行为和 Web 不同
在 React Native + NativeWind 场景下，text-justify 是开箱即用的，且映射到原生 textAlign: "justify"。但它和 Web 端有本质区别：
- React Native 的
justify行为由平台渲染引擎决定（iOS/Android 原生 TextView），不走 CSS 引擎，所以不会出现标点悬出问题 - 但也不支持
text-justify: inter-character这类 CSS3 扩展属性 - 若同时维护 Web 和 Native，不要假设
text-justify在两端表现一致——Web 端需自行扩展配置，Native 端则直接可用
替代方案比 text-justify 更可控
当 text-justify 效果不可靠时，这几个更务实的做法往往更稳：
- 用
text-start/text-end配合dir="rtl"或dir="ltr"处理多语言场景，逻辑清晰且无兼容性风险 - 对短文本（如导航项、标签列表），用
flex+justify-between拆成独立元素，再用flex-1或min-w-0控制换行 - 纯展示型中文段落，宁可手动插入
white-space: pre+ 固定字符数排版，也别强求自动 justify
真正麻烦的从来不是“怎么加 class”，而是“加了之后用户看到的是什么”。中文两端对齐至今没有跨浏览器、跨平台、跨字号的稳定解法，能不用就尽量不用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
