text-justify 类在 Tailwind CSS 默认配置中不存在,需手动在 tailwind.config.js 的 theme.extend.textAlign 中添加 'justify': 'justify' 才能启用;但中文两端对齐效果差,易出现标点悬出、字距不均等问题,建议优先使用 text-start/text-end 或 text-center。

text-justify 类在 Tailwind CSS 默认配置中并不存在,直接写不会生效——这不是你漏写了 class,而是它压根没被定义。
为什么 text-justify 不生效
Tailwind 官方从 v3.0 到当前最新版(2026 年)均未默认导出 text-justify 工具类。你看到的文档或示例里出现该类,大概率是:
- 旧版社区插件或自定义配置残留
- 混淆了原生 CSS 的
text-align: justify和 Tailwind 的命名逻辑 - 某些 IDE 自动补全错误地推了不存在的类名
运行时检查生成的 CSS 文件,你会发现没有 text-align: justify 对应的规则;浏览器开发者工具里也看不到该样式被应用。
如何正确启用文字两端对齐
必须手动扩展 tailwind.config.js,显式添加 textAlign 配置项,并确保 JIT 编译能扫描到你用到它的文件。
立即学习“前端免费学习笔记(深入)”;
- 打开
tailwind.config.js - 在
theme.extend下添加:textAlign: { 'justify': 'justify', } - 确认
content配置路径覆盖了使用该类的模板文件(例如./src/**/*.{html,js,ts,jsx,tsx}) - 重启开发服务器(部分环境需手动清缓存)
之后就能安全使用 text-justify 了,它会生成 text-align: justify 规则。
中文两端对齐的实际效果很有限
即使配置成功,text-justify 在中文段落中往往表现不佳:
- 标点符号容易“悬出”行尾(尤其句号、顿号)
- 字距拉伸不均匀,出现大片空白或挤压感
- 浏览器对 CJK 文本的 justify 算法支持参差,Chrome/Firefox/Safari 表现不一致
更可控的做法是:
- 优先用
text-start/text-end+ 合理容器宽度控制视觉节奏 - 对关键标题或短句,用
text-center替代两端对齐 - 真要强求排版,可配合
hyphens: auto(需语言属性lang="zh")或第三方库如justified-text
justify-between 是 flex 布局的,别和文本对齐混用
很多初学者会把 justify-between 当成文本两端对齐方案——它只作用于 flex 容器的子元素,和 text-align 完全无关。
-
justify-between:让多个块级子元素分别贴左/贴右,中间留空 -
text-justify:让单个文本块内每行文字左右撑满(依赖浏览器排版引擎)
二者适用场景、生效前提、CSS 属性层级都不同。误用会导致布局错乱且难以调试。
真正难的不是加配置,而是判断什么时候不该用 text-justify——中文内容下,它常是“看起来正确,实际伤体验”的典型工具。



















