在传统 CSS 中，我们通常使用 text-align 属性来控制文本的水平对齐方式。而在 Tailwind CSS 中，这一切都被简化为了以 “text-” 开头加上对齐方位的类名。
Tailwind CSS 文本对齐语法
在 Tailwind CSS 中，我们可以使用 “text-*” 相关类名来定义文本的对齐效果。
语法：
text-{对齐方式}说明：
其中，常用的类名如下表所示。
| 类名 | 对应 CSS | 说明 |
|---|---|---|
| text-left（默认） | text-align: left; | 左对齐 |
| text-center | text-align: center; | 居中对齐 |
| text-right | text-align: right; | 右对齐 |
| text-justify | text-align: justify; | 两端对齐 |
Tailwind CSS 文本对齐示例
接下来，我们通过几个简单的例子来讲解一下如何使用 Tailwind CSS 来定义文本的对齐效果。
示例 1：定义文本对齐
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body>
<p class="text-left text-gray-800 mb-4">
左对齐 (text-left)
</p>
<p class="text-center text-gray-800 mb-4">
居中对齐 (text-center)
</p>
<p class="text-right text-gray-800">
右对齐 (text-right)
</p>
</body>
</html>页面效果如下图所示。
示例 2：两端对齐
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="p-10">
<div class="w-1/2 p-4 border border-gray-300">
<h3 class="font-bold mb-2">左对齐 (text-left)</h3>
<p class="text-left text-gray-700">
绿叶网是一个专业极致、富具个性的网站。在这里，我们只提供能让你眼前一亮的教程。排版的美观度直接决定了用户的阅读体验，好的排版让人赏心悦目。
</p>
</div>
<div class="w-1/2 p-4 border border-gray-300">
<h3 class="font-bold mb-2">两端对齐 (text-justify)</h3>
<p class="text-justify text-gray-700">
绿叶网是一个专业极致、富具个性的网站。在这里，我们只提供能让你眼前一亮的教程。排版的美观度直接决定了用户的阅读体验，好的排版让人赏心悦目。
</p>
</div>
</body>
</html>页面效果如下图所示。
分析：
我们可以通过拉伸改变浏览器窗口大小，此时可以看到：使用了 text-justify 类名的段落，浏览器会自动拉伸每一行文字之间的空格，强制让每一行的左右两端都紧贴边框，这种方式非常适合长篇阅读。
常见问题
1. 为什么我给 div 设置了 text-center 了之后，并没有水平居中呢？
这是一个新手非常容易混淆的概念。text-center 对应的是 CSS 的 text-align: center;，它只能让元素内部的 “文本内容” 或者 “行内元素（如 span、img）” 进行水平居中。
如果想让一个 “块级元素” 在父容器里水平居中，我们需要使用之前 “Tailwind CSS 外边距” 一节中介绍的 mx-auto（即margin: 0 auto;）才行。
