推荐用语义化 ol 包裹 li 组织步骤条，天然支持顺序、可访问性与计数器；连接线用 ::after 伪元素实现并限制非末项渲染，状态通过 data-step 属性配合 css 属性选择器动态控制三态样式。
步骤条的 HTML 结构怎么组织才利于 Tailwind 控制状态？
步骤条本质是「带序号的横向流程节点 + 连接线」，Tailwind 没有内置 Step 组件，必须靠语义化结构 + 状态类手动控制。推荐用 ol 包裹 li，每个 li 代表一步，这样天然支持顺序、可访问性（aria-current），也方便用 :has() 或兄弟选择器处理连接线。
关键点：不要用 div 堆砌，否则后续加「当前步高亮」「已完成步打勾」会多写大量重复 class；ol 的 counter-reset 默认可用，省去手动写数字。
常见错误：把连接线单独抽成元素——结果响应式断点一调，线就对不齐；正确做法是用 after 伪元素画线，并限制只在非最后项渲染：
<ol class="flex items-center">
<li class="relative flex items-center [&_span]:text-xs [&_span]:font-medium text-gray-500">
<span class="z-10 flex h-8 w-8 items-center justify-center rounded-full bg-gray-200">1</span>
<span class="ml-2">填写信息</span>
<span class="absolute -right-8 top-1/2 h-0.5 w-16 -translate-y-1/2 bg-gray-200"></span>
</li>
<li class="relative flex items-center [&_span]:text-xs [&_span]:font-medium text-blue-600">
<span class="z-10 flex h-8 w-8 items-center justify-center rounded-full bg-blue-600 text-white">2</span>
<span class="ml-2">验证邮箱</span>
<span class="absolute -right-8 top-1/2 h-0.5 w-16 -translate-y-1/2 bg-blue-600"></span>
</li>
<li class="flex items-center [&_span]:text-xs [&_span]:font-medium text-gray-400">
<span class="z-10 flex h-8 w-8 items-center justify-center rounded-full border-2 border-gray-400"></span>
<span class="ml-2">完成注册</span>
</li>
</ol>
如何用 Tailwind 动态切换「未开始 / 进行中 / 已完成」三态样式？
Tailwind 本身不处理状态逻辑，但可以靠预设 class 组合 + JS 控制父容器 class 实现。核心思路：给 ol 加一个状态标识（如 data-step="2"），再用属性选择器匹配子项。
实操建议：
- 定义三套基础 class：未开始用
text-gray-400+border-gray-400，进行中用text-blue-600+bg-blue-600，已完成用text-green-600+bg-green-600+after:content-['✓'] - 用
[data-step='1'] > li:nth-child(1)这类选择器精准命中，避免全局污染 - 连接线颜色要和「当前步」一致，但只画到倒数第二项——所以第
n步激活时，前n-1条线用当前色，第n条线隐藏 - 移动端建议改用垂直布局：
flex-col+before画竖线，避免小屏挤压
为什么直接用 peer 和 group 很难搞定步骤条？
peer 要求兄弟元素且同级，但步骤条的「当前步」和「前面所有步」不是简单兄弟关系——比如第 3 步激活时，要同时影响第 1、2 步的样式（变绿）、第 1–2 条线的颜色（变蓝）、第 3 步自身（高亮）、第 4+ 步（置灰）。peer 只能向上影响前一个兄弟，无法批量控制前面多个。
更现实的做法是：
- 用 JS 设置
ol的data-step属性，再配合属性选择器 +:nth-child() - 或者用框架（React/Vue）的条件 class，比如
className={\`... \${index - 硬上
group会导致 CSS 体积暴增，每个 step 都要写.group-\[step-3\]:first-child这种组合，维护成本远高于 JS 控制
响应式断点下连接线错位、圆点变形怎么办？
问题根源在于固定宽高（如 w-16、h-8）在小屏下撑开布局。Tailwind 的 sm:/md: 前缀只能控制显隐或基础尺寸，但连接线长度、圆点间距、字体大小需要协同变化。
解决路径：
- 连接线用
flex-1替代固定w-，让其自动填满剩余空间；用min-w-0防止文字溢出挤压 - 圆点统一用
aspect-square+h-8，比w-8 h-8更稳（尤其在 font-size 缩小时） - 文字用
text-xs sm:text-sm，但注意ml-2在小屏可能太窄，换成sm:ml-3 - 最关键的：在
md:断点后改用flex-row，之前用flex-col，并把连接线从absolute改为flex内部的flex-1元素，避免定位失效
复杂点在于状态和响应式要同时生效——比如「第 2 步激活」在桌面端显示横排带蓝线，在手机端变成竖排带蓝竖线，这两套逻辑不能耦合在同一个 class 里，得拆成状态层（data-step）和布局层（flex-col / flex-row）分别控制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
