tailwind 默认不提供 text-indent 工具类，需在 tailwind.config.js 的 theme.extend 中手动添加 textindent 配置，推荐用 rem 或 ch 单位适配中文排版，并注意 firefox 在 flex/grid 中的兼容性问题及列表项缩进副作用。
tailwind.config.js 里没内置 text-indent 类
Tailwind 默认不生成 text-indent 工具类，哪怕你写了 class="indent-4" 也不会生效——这不是你配错了，是它压根没定义。官方认为首行缩进在响应式排版中语义模糊、跨设备表现不稳定，所以主动剔除了。
要支持首行缩进，必须手动扩展配置：
- 打开
tailwind.config.js - 在
theme.extend下添加textIndent（注意不是indent） - 推荐用
rem单位映射，比如1rem = 2ch更贴合中文排版习惯
module.exports = {
theme: {
extend: {
textIndent: {
'0': '0',
'1': '1rem', // ≈ 2个汉字宽度
'2': '2rem',
'4': '4rem',
}
}
}
}
用 text-indent 类时要注意浏览器渲染差异
Chrome 和 Safari 对 text-indent 的处理基本一致，但 Firefox 在 flex 或 grid 容器内的 <p></p> 上可能忽略该样式——尤其当父容器设了 display: flex 且未显式声明 flex-direction: column 时。
安全做法：
- 只对语义明确的块级元素（如
<p></p>、<div class="prose">）使用 <code>text-indent - 避免嵌套在
flex/grid直接子元素里；若必须，加align-self: start强制回流 - 中文场景下慎用
text-indent: 2em：em 依赖字体大小，而中文字体的font-size和实际字宽非线性，建议优先用rem或ch
替代方案：用 before 伪元素模拟更可控
如果项目已禁用自定义 CSS 或无法改配置，可用伪元素绕过限制。虽然多写几行，但兼容性更好、行为更确定：
.paragraph-indent::before {
content: " "; /* 全角空格，两个刚好≈2字宽 */
float: left;
width: 2ch;
}
用法：<p class="paragraph-indent">正文…</p>
优点：
- 完全避开
text-indent的继承与重置问题 - 全角空格在所有中文字体下宽度稳定
- 可配合
@layer utilities封装成可复用工具类
别忘了重置 text-indent 在列表项里的副作用
一旦全局启用了 text-indent 扩展，所有带该类的元素都会缩进——包括 <li>。如果你给整个文章容器加了 text-indent-2，结果发现列表项也缩进了两格，那就踩坑了。
应对方式：
- 避免在父级上批量应用
text-indent类 - 改用子选择器精确控制：
<article class="prose"><p class="text-indent-2">…</p></article> - 必要时对
li显式重置：li { text-indent: 0 !important; }
最常被忽略的是：缩进值和行高、字体族强相关。同一 text-indent: 2rem 在 font-family: "PingFang SC" 和 "Noto Sans CJK" 下视觉宽度能差 15%，上线前务必在目标字体下实测。
