基于Tailwind CSS实现分步表单有序列表的进度式边框着色

原方案中<ol>的左侧边框是单一连续样式，无法实现分段着色，我们可以通过给每个已完成步骤添加独立的垂直线条替代全局边框，实现进度分段效果：

修改后的代码（Blade + Tailwind CSS） #

<div class="w-[24%]">
    <ol class="relative text-gray-500 dark:text-gray-400">
        <!-- 个人信息步骤 -->
        <li class="mb-10 ms-6 relative">
            <!-- 已完成时，显示连接到下一个步骤的蓝色线条 -->
            @if ($currentStep > 0)
            <span class="absolute left-0 top-5 bottom-0 w-0.5 bg-blue-700 dark:bg-blue-700"></span>
            @endif
            <span class="absolute flex items-center justify-center -start-2.5 h-5 w-5 bg-white rounded-full ring-4 ring-white dark:ring-gray-800 dark:bg-gray-800">
                <span class="absolute flex items-center justify-center h-2.5 w-2.5 {{ $currentStep >= 0 ? 'bg-blue-700 ring-blue-500 dark:bg-blue-700 dark:ring-blue-700' : 'bg-white ring-gray-300 dark:ring-gray-700 dark:bg-gray-800' }} rounded-full ring-2">
                    @if ($currentStep > 0)
                        <svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 12 4.7 4.5 9.3-9" />
                        </svg>
                    @endif
                </span>
            </span>
            <h3 class="font-medium leading-tight">Personal Info</h3>
        </li>

        <!-- 账户信息步骤 -->
        <li class="mb-10 ms-6 relative">
            <!-- 已完成时显示蓝色线条，未完成时显示灰色线条 -->
            @if ($currentStep > 1)
            <span class="absolute left-0 top-5 bottom-0 w-0.5 bg-blue-700 dark:bg-blue-700"></span>
            @elseif ($currentStep <= 1 && $currentStep > 0)
            <span class="absolute left-0 top-5 bottom-0 w-0.5 bg-gray-200 dark:bg-gray-700"></span>
            @endif
            <span class="absolute flex items-center justify-center -start-2.5 h-5 w-5 bg-white rounded-full ring-4 ring-white dark:ring-gray-800 dark:bg-gray-800">
                <span class="absolute flex items-center justify-center h-2.5 w-2.5 {{ $currentStep >= 1 ? 'bg-blue-700 ring-blue-500 dark:bg-blue-700 dark:ring-blue-700' : 'bg-white ring-gray-300 dark:ring-gray-700 dark:bg-gray-800' }} rounded-full ring-2">
                    @if ($currentStep > 1)
                        <svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 12 4.7 4.5 9.3-9" />
                        </svg>
                    @endif
                </span>
            </span>
            <h3 class="font-medium leading-tight">Account Info</h3>
        </li>

        <!-- 审核步骤 -->
        <li class="mb-10 ms-6 relative">
            <!-- 已完成时显示蓝色线条，未完成时显示灰色线条 -->
            @if ($currentStep > 2)
            <span class="absolute left-0 top-5 bottom-0 w-0.5 bg-blue-700 dark:bg-blue-700"></span>
            @elseif ($currentStep <= 2 && $currentStep > 1)
            <span class="absolute left-0 top-5 bottom-0 w-0.5 bg-gray-200 dark:bg-gray-700"></span>
            @endif
            <span class="absolute flex items-center justify-center -start-2.5 h-5 w-5 bg-white rounded-full ring-4 ring-white dark:ring-gray-800 dark:bg-gray-800">
                <span class="absolute flex items-center justify-center h-2.5 w-2.5 {{ $currentStep >= 2 ? 'bg-blue-700 ring-blue-500 dark:bg-blue-700 dark:ring-blue-700' : 'bg-white ring-gray-300 dark:ring-gray-700 dark:bg-gray-800' }} rounded-full ring-2">
                    @if ($currentStep > 2)
                        <svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 12 4.7 4.5 9.3-9" />
                        </svg>
                    @endif
                </span>
            </span>
            <h3 class="font-medium leading-tight">Review</h3>
        </li>

        <!-- 确认步骤 -->
        <li class="ms-6 relative">
            <!-- 未完成时显示灰色线条连接上一步 -->
            @if ($currentStep <= 3 && $currentStep > 2)
            <span class="absolute left-0 top-5 bottom-0 w-0.5 bg-gray-200 dark:bg-gray-700"></span>
            @endif
            <span class="absolute flex items-center justify-center -start-2.5 h-5 w-5 bg-white rounded-full ring-4 ring-white dark:ring-gray-800 dark:bg-gray-800">
                <span class="absolute flex items-center justify-center h-2.5 w-2.5 {{ $currentStep >= 3 ? 'bg-blue-700 ring-blue-500 dark:bg-blue-700 dark:ring-blue-700' : 'bg-white ring-gray-300 dark:ring-gray-700 dark:bg-gray-800' }} rounded-full ring-2">
                </span>
            </span>
            <h3 class="font-medium leading-tight">Confirmation</h3>
        </li>
    </ol>
</div>

核心修改点 #

1. 移除全局边框：删除<ol>的border-s border-gray-200 dark:border-gray-700类，放弃单一连续边框
2. 添加分段线条：给每个<li>添加relative定位，通过条件判断生成独立的垂直线条：
   • 已完成步骤之间显示蓝色进度线条
   • 未完成步骤之间显示灰色默认线条
3. 修正样式细节：线条定位在left-0，高度从top-5（对应步骤圆圈的底部）延伸到bottom-0，宽度w-0.5和原边框一致

内容的提问来源于stack exchange，提问作者raliqala