indent-8 不起作用是因为 Tailwind CSS 默认不提供 text-indent 工具类，需通过自定义配置（如 theme.extend.textIndent + 插件）或内联样式等方式手动启用。
indent-8 这类类名在默认 Tailwind CSS 中并不存在，直接写不会生效。
为什么 indent-8 不起作用
Tailwind 默认不提供 text-indent 相关的实用工具类（如 indent- 系列）。它的核心设计里，text-indent 被视为“低频、语义强、易出错”的样式，未纳入开箱即用的工具集中。
常见错误现象包括：
- 写了
class="indent-8"，但浏览器开发者工具里看不到text-indent生效 - 误以为它和
ml-8（margin-left）功能类似，结果整个段落左移，而非仅首行缩进 - 在富文本渲染或 CMS 输出的
上加了该类，却因父容器是 flex/grid 或元素本身是 inline，导致完全无效
如何安全添加 indent- 类支持
必须通过自定义配置显式启用。Tailwind v3.0+ 推荐使用 theme.extend.spacing + textIndent 插件或直接扩展 text-indent 工具类：
- 在
tailwind.config.js的theme.extend中添加textIndent配置（需配合插件或手动写 CSS） - 更稳妥的做法：用
plugins注册一个极简插件，生成indent-*类，例如：
module.exports = {
theme: {
extend: {
textIndent: {
'0': '0',
'2': '2ch',
'4': '4ch',
'6': '6ch',
'8': '8ch',
}
}
},
plugins: [
function ({ addUtilities }) {
const newUtilities = {}
Object.entries(theme('textIndent')).forEach(([key, value]) => {
newUtilities[`.indent-${key}`] = { 'text-indent': value }
})
addUtilities(newUtilities)
}
]
}
之后就能用 class="indent-2" 对应 text-indent: 2ch ——比 2em 更稳定，尤其对中文字体。
不用插件时的临时方案
如果不想改配置，有三个可立即上手的替代方式：
- 直接内联 style：
...
- 用
@layer utilities在 CSS 文件中补一句：@layer utilities { .indent-2 { text-indent: 2ch; } } - 退而求其次用
pl-6（padding-left）模拟，但注意：它会让整段文字左移，破坏段落对齐逻辑，且无法实现悬挂缩进等高级排版
容易被忽略的兼容性细节
text-indent 只对块级元素起作用，而 Tailwind 常用的 flex 容器子项、或某些框架（如 Next.js 的 MDX 渲染）可能让 计算后 display 为 inline 或受 display: contents 影响。此时即使写了 indent-2，也毫无反应。务必用开发者工具检查该元素的最终 display 值和盒模型，必要时强制加 block。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
