text-center 和 text-left 是 Tailwind 的原子级文本对齐工具类，仅控制当前元素内联内容的 text-align，不影响子元素布局流或盒模型。
text-center 和 text-left 是什么级别的控制？
它们是 Tailwind 的「原子级文本对齐工具类」，只作用于当前元素的 text-align CSS 属性，不改变子元素的布局流或盒模型。换句话说：text-center 不会让子元素水平居中（比如 div 或 img），它只让内联内容（文字、span、input 里的文字等）在本元素宽度内居中。
- 常见错误现象：
div加了text-center，但里面的button还是靠左——因为button是块级元素，默认独占一行，text-align对它无效 - 正确使用场景：标题居中、表单标签对齐、按钮内文字居中、表格单元格内容对齐
- 性能/兼容性：无运行时开销，纯 CSS，所有现代浏览器包括 IE11 都支持
什么时候该用 text-center，什么时候该用 flex justify-center？
关键看目标：对齐「文字」还是「元素」。
-
text-center→ 文字内容居中（如h1标题、p段落、label文字） -
flex justify-center→ 让子元素（如div、img、button）在容器内水平居中 - 混用常见：容器用
flex justify-center居中一个卡片，卡片内部用text-center居中标题和段落 - 容易踩的坑：给父容器加
text-center后发现子div没动，就怀疑 Tailwind 失效——其实是选错了工具
响应式文本对齐怎么写？
Tailwind 支持前缀响应式断点，比如 sm:text-left、md:text-center、lg:text-right。注意顺序：小屏默认左对齐，大屏再居中，是合理且可维护的写法。
- 典型用例：移动端左对齐便于阅读，桌面端标题居中提升视觉平衡
- 参数差异：所有断点前缀（
sm:、md:、lg:、xl:、2xl:）都可用，但xs:不存在（最小断点就是基础样式） - 不要写
text-left md:text-center lg:text-left——除非真有需求，否则会增加理解成本和维护负担 - 错误示例：
text-center sm:text-left在手机上反而取消居中，容易漏测
text-right / text-justify / text-start 有什么区别？
它们对应不同的 text-align 值，但语义和行为有细微差别：
-
text-right→ 等价于text-align: right，传统右对齐 -
text-justify→ 强制两端对齐（单词间拉伸），适合长段落，但小屏幕或短行易产生过大词间距 -
text-start→ 基于书写方向的“起始对齐”，LTR（如英文）下等于text-left，RTL（如阿拉伯文）下等于text-right；适合国际化项目 - 兼容性提醒：
text-justify在 Safari 旧版本中对中文支持不稳定，慎用于标题或短文本
实际对齐效果取决于父容器宽度是否明确、字体是否支持连字、是否启用 hyphens 等，不是加个 class 就万事大吉。尤其是 text-justify，得配合足够长度和合理断行策略才好看。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
