Tailwind CSS默认不提供indent-前缀类，因其设计上将首行缩进交由原生text-indent属性实现；正确做法是用text-indent:2em（推荐）、自定义配置或内联样式，避免误用pl-8等影响整段布局的属性。
为什么 indent-8 不是首行缩进的正确用法
因为 indent-8 是 Tailwind 的 text-indent 工具类，但它并不存在 —— Tailwind CSS 官方并未提供 indent- 前缀的类名。你看到的 indent-8 很可能是误记、自定义插件添加的类，或混淆了其他 CSS 框架（比如 Bootstrap 的 text-indent-*）。Tailwind 默认不生成 text-indent 相关的工具类，哪怕你启用了 @tailwind utilities，也不会自动输出 indent-*。
如何在 Tailwind 中真正实现首行缩进
必须手动扩展配置或直接写内联样式，因为 Tailwind 的默认预设不包含 text-indent 类。以下是三种可立即落地的方式：
- 使用
style属性（最快验证）：<p style="text-indent: 2em;">第一行会缩进</p> - 在
tailwind.config.js的theme.extend.spacing或theme.extend.textIndent中添加自定义值，再通过text-indent插件启用（需安装tailwindcss-text-indent或类似插件） - 最轻量的做法：在全局 CSS 中加一条规则，例如
p { text-indent: 2em; }，然后配合class="first-line:..."控制例外情况
注意：Tailwind 的 space- 类（如 space-y-4）控制的是兄弟元素间距，和首行缩进完全无关；pl-8 是左内边距，作用于整个块，会把全部文字（不止首行）向右推，破坏段落对齐逻辑。
text-indent 的单位选择与常见陷阱
用 em 或 rem 是稳妥选择，px 在响应式场景下容易失效。但要注意两个隐蔽坑：
立即学习“前端免费学习笔记（深入）”；
-
text-indent只对块级元素生效 —— 如果你在<span class="inline">上加text-indent，它不会起作用 - 当父容器设置了
text-align: justify或white-space: nowrap，text-indent可能被忽略或表现异常 - 在 Flex/Grid 容器中直接子元素为文本节点时，
text-indent不会应用，必须包裹在<p>或<div>等块级标签里
为什么不要用 pl-8 代替首行缩进
因为 pl-8（即 padding-left: 2rem）会让整段文字整体右移，包括第二行、第三行……这违反了“仅首行缩进”的排版语义。中文出版规范要求首行缩进两个汉字宽度（约 2em），其余行左对齐。用 pl- 类会导致：
- 段落右侧可能因内容过长而溢出容器（无自动换行补偿）
- 与相邻段落的视觉节奏断裂，尤其在多栏布局中
- 无法响应字体大小变化 ——
pl-8固定为 2rem，而用户放大字号后，缩进量应同比例增大
真正需要首行缩进的地方，几乎都落在语义化的段落容器上，text-indent 是唯一符合规范、浏览器原生支持、且可继承的方案。Tailwind 不内置它，不是疏忽，而是设计取舍：它把这类语义化排版交还给 CSS 原生能力。
