Tailwind CSS 文本缩进语法
在 Tailwind CSS 中，我们可以使用 “indent-*” 相关类名来定义文本的首行缩进（相当于传统 CSS 中的 text-indent）。
语法：
indent-{尺寸}说明：
这里的 “尺寸” 依然遵循 Tailwind CSS 经典的 “4的倍数”（即 1 个单位 = 4px）。其中，常用的类名如下表所示：
| 类名 | 对应 CSS | 说明 |
|---|---|---|
| indent-0（默认） | text-indent: 0px; | 取消缩进 |
| indent-2 | text-indent: 8px; | 缩进 8px |
| indent-4 | text-indent: 16px; | 缩进 16px |
| indent-8 | text-indent: 32px; | 缩进 32px |
text-indent 也是可以有负值的。如果想要在 Tailwind CSS 实现负的 text-indent，只需要在类名前面加上一个 “-” 即可，比如：
-indent-4当首行缩进为负数时，首行文字就会向左侧 “凸出”。这种排版技巧在前端又被称为 “悬挂缩进”，经常用于引用文献或特殊列表排版中。
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 class="p-10">
<h3 class="text-xl font-bold text-center">爱莲说</h3>
<p class="indent-8">水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p>
<p class="indent-8">予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻；莲之爱，同予者何人 ? 牡丹之爱，宜乎众矣。</p>
</body>
</html>页面效果如下图所示。
分析：
由于浏览器默认字体大小为 16px，所以 indent-8（32px）在视觉上刚好是缩进 2 个中文字符的宽度。
假如我们将段落字号变大（比如改为 20px），那么 32px 的缩进就达不到 2 个中文字符宽度了。如果希望无论字号多大，首行永远缩进 2 个中文字符宽度，此时就需要使用 “任意值” 语法才能实现。
Tailwind CSS 文本缩进 “任意值”
在 Tailwind CSS 中，我们可以使用中括号 “[]” 的方式来定义任意值的文本首行缩进。
语法：
indent-[值]说明：
比如 indent-[2em]，表示将 text-indent 定义为 2em。
示例 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">
<h3 class="text-xl font-bold text-center">爱莲说</h3>
<p class="indent-[2em]">水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p>
<p class="indent-[2em]">予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻；莲之爱，同予者何人 ? 牡丹之爱，宜乎众矣。</p>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们使用了 indent-[2em]。这样无论如何修改该元素的字体大小，段落首行都是缩进 2 个中文字符距离，这也是处理文章排版时最专业、最推荐的写法。
在 CSS 中，em 是一个相对单位，1em 永远等于当前元素的字体大小（font-size），然后 2em 就刚好等价于两个中文字符。
常见问题
1. 为什么我给一个 span 标签加上 indent-8，却没有任何效果？
这是因为 text-indent 属性只会对块级元素（如 p、div、h1）或行内块元素（inline-block）生效，而对于行内元素（如 span、a）是无效的。
如果非要使得 span 实现首行缩进，我们应该给它加上 “block” 或 “inline-block” 类名才行。
