Tailwind默认不提供计数器工具类，需在@layer utilities中自定义counter-reset、counter-increment及::before伪元素样式，配合显式重置作用域与合理盒模型控制实现自定义序号。
为什么不能直接用 list-style-type 实现自定义序号？
因为 list-style-type 只支持有限的内置类型（如 decimal、lower-roman），无法插入图标、文字前缀、多级嵌套样式，或与 Tailwind 的响应式类协同。一旦需要 “Step 1”、“→ 2.” 或 “①” 这类混合内容，就必须绕过默认列表机制，改用 CSS 计数器 + ::before 伪元素。
如何用 counter-reset 和 counter-increment 搭配 Tailwind？
Tailwind 默认不提供计数器相关工具类，但你可以安全地在 @layer utilities 中注入自定义指令，不影响 JIT 编译。关键不是“禁用 Tailwind”，而是补足它没覆盖的能力：
@layer utilities {
.counter-reset-\[steps\] {
counter-reset: steps;
}
.counter-increment-\[steps\] {
counter-increment: steps;
}
.counter-\[steps\]::before {
content: counter(steps) ". ";
font-weight: 600;
}
}
然后在 HTML 中使用：
<ol class="counter-reset-[steps]"> <li class="counter-increment-[steps] counter-[steps] pl-6">配置环境</li> <li class="counter-increment-[steps] counter-[steps] pl-6">安装依赖</li> </ol>
- 必须显式写
counter-reset-[steps]在父容器上，否则子项的counter-increment无基准 -
pl-6是为了给伪元素留出缩进空间，Tailwind 的pl-类不会影响::before的定位 - 不要对
<li>同时加list-none和期望它保留原有序号——这会冲突，应彻底弃用list-style
如何实现带前缀/后缀或响应式序号？
只需修改 content 值即可，Tailwind 不干涉这部分。例如：
立即学习“前端免费学习笔记（深入）”；
.counter-step::before {
content: "Step " counter(steps) ": ";
@apply text-blue-600 font-medium;
}
@media (min-width: 768px) {
.counter-step::before {
content: "STEP " counter(steps) " — ";
}
}
对应 HTML：
<ol class="counter-reset-[steps]"> <li class="counter-increment-[steps] counter-step pl-8">初始化项目</li> </ol>
- 响应式切换靠媒体查询，不是 Tailwind 的断点类（如
md:content-...无效） - 如果序号需右对齐（如文档编号），需额外设置
text-align: right并用direction: rtl或margin-left: auto控制位置 - 避免在
content中拼接大量字符串，CSS 不支持变量，复杂逻辑建议交由 JS 渲染
嵌套计数器（如 1.1、1.2）要注意什么？
嵌套时每个层级需独立命名并重置，不能全用 steps。例如二级用 substeps：
<ol class="counter-reset-[steps]">
<li class="counter-increment-[steps] counter-[steps]">
主步骤
<ol class="counter-reset-[substeps]">
<li class="counter-increment-[substeps] counter-[substeps]">子项</li>
</ol>
</li>
</ol>
对应 CSS：
.counter-[steps]::before {
content: counter(steps) ". ";
}
.counter-[substeps]::before {
content: counter(steps) "." counter(substeps) " ";
}
- 父层
counter-reset必须在<ol>上，不能只写在<li>里，否则子<ol>拿不到重置作用域 - 嵌套层级深时，
counter()第二个参数（样式）要一致，比如都用decimal，否则可能出现 “1.a” 这类错乱 - Tailwind 的
space-y-类仍可正常使用，它作用于真实 DOM 元素，不影响伪元素布局
display: inline-block 或 flex 包裹伪元素内容，并显式设 line-height。 
