Tailwind 不支持 CSS 计数器（如 counter-increment、counters()），因其原子化设计不解析计数逻辑，伪元素 content 仅支持静态字符串；动态编号需依赖 HTML 语义列表、JS 或插件。
Tailwind 本身不提供 counter-increment 或 list-style-type: decimal-leading-zero 这类原生 CSS 计数器能力，所有“列表编号”必须靠 HTML 结构或 JS 控制；伪类修饰符（如 first、even）只能辅助样式，不能生成数字内容。
为什么 counters() 和 counter-reset 在 Tailwind 里不可用
Tailwind 是原子化工具类系统，它不解析或注入 CSS 计数器逻辑，也不生成 content: counter(...) 规则。所有伪元素内容（如 ::before 中的编号）需手动写进 CSS，或靠插件扩展 —— Tailwind 默认的 before: / after: 只支持固定字符串（如 before:content-['1.']），不支持动态计数。
-
first:、last:、odd:、even:都只影响已有 DOM 元素的样式，不改变其内容或顺序 - 试图用
before:content-['1']+second:+before:content-['2']是无效的 —— Tailwind 没有second:这个变体，且content不支持变量或递增 - 浏览器对
ol的内置计数器（list-style-type: decimal）可直接用，但 Tailwind 不封装它；你得自己写<ol class="list-decimal">，而非依赖工具类
用 first / last 控制首尾项的编号样式
如果你用的是语义化 <ol>，编号由浏览器渲染，此时 first: 和 last: 可用于调整首项缩进、末项间距等视觉细节，而非生成编号本身。
-
first:pl-0去掉首项左侧 padding，让编号贴左 -
last:mb-0清除末项底部 margin，避免多余空白 -
first:before:content-['★']可替换首项 marker（需配合list-none和自定义ol li结构） - 注意：
first:before作用于li元素自身，不是ol；若li被包裹（如<li><div>...</div></li>），first:仍匹配li，但before插入位置取决于该li的 display 类型
用 group- + group-odd 模拟带编号的嵌套列表
当列表项被容器包裹（如 React 中每个 li 外套 <div class="item">），原生 odd: 失效，必须靠 group 提升作用域，并手动控制编号显示逻辑。
立即学习“前端免费学习笔记（深入）”；
- 给父容器加
group，子项用group-odd:before:content-['1.'] group-even:before:content-['2.']—— 但这只是静态编号，无法自动递增 - 真正动态编号需 JS：在渲染时计算索引，传入
data-index="1"，再配[data-index='1']:before:content-['1.']（需启用content扫描） -
group-first:before:content-['❶']可用于图标式首项标记，但同样不递增 - 响应式下编号对齐易错位：
before默认 inline，若父li是 flex，需加before:mr-2或before:shrink-0
真正需要编号递增时，别硬套 Tailwind 工具类
复杂计数器（如 “第1章 → 1.1 → 1.1.1”、重置子级计数、跳过编号）本质是 CSS 内容生成问题，Tailwind 的设计哲学不覆盖这一层。强行用工具类拼凑，只会导致维护困难和语义断裂。
- 方案一：保留
<ol>+ 自定义 CSS（ol { counter-reset: section; }），Tailwind 只管间距/颜色/圆角 - 方案二：组件内用 JS 生成编号文本，Tailwind 控制其容器样式（
text-sm font-mono等） - 方案三：引入插件如
@tailwindcss/typography（它对ol有基础增强，但不扩展计数器逻辑） - 最容易被忽略的点：开发者常以为
even:bg-gray-50能“替代”编号逻辑，其实二者解决的是不同问题 —— 背景交替 ≠ 序号生成
