Tailwind自定义步骤条调整：将步骤名称移至圆圈下方并增大间距

一、调整步骤名称到圆圈下方的修改点 #

• 将每个<li>标签的类从relative md:flex-1 md:flex改为relative md:flex-1 md:flex md:flex-col md:items-center，让li内的元素纵向排列且居中
• 删除步骤文字<p>标签的ml-4类，新增mt-2 text-center类，让文字位于圆圈下方、和圆圈保留间距且居中对齐

二、调大步骤之间间距的修改点 #

• 给<ol>标签的类新增gap-x-16（数值可自定义，数值越大间距越宽），自定义步骤之间的横向间距
• 调整步骤间连接线的样式，把原来固定宽度的w-80 ml-9改为w-full ml-10，适配可变的步骤间距，同时给最后一个li的连接线添加hidden类避免多余的连线溢出

修改后的完整代码 #

<div class="flex justify-center">       
    <div  class="mt-4 grid grid-cols-2 gap-y-6 sm:grid-cols-2 sm:gap-x-4">     
        <nav aria-label="Progress" class="sm:col-span-2 stepper">
            <ol role="list" class="rounded-md divide-y divide-gray-300 md:flex md:divide-y-0 gap-x-16">
                <li class="relative md:flex-1 md:flex md:flex-col md:items-center" >    
                                            
                <div class="absolute inset-0 flex items-center" aria-hidden="true">
                    <div class="h-0.5 w-full bg-green-500 ml-10"></div>
                </div>
                <a href="#"  class="relative w-8 h-8 flex items-center justify-center rounded-full">
                    <!-- Heroicon name: solid/check -->
                    <span :class="step == '2' ? 'bg-green-500 rounded-full group-hover:bg-green-800' : 'border-2 border-green-500 rounded-full '" class="flex-shrink-0 w-10 h-10 flex items-center justify-center ">
                                    
                        <svg x-show="step == '2'" class="w-6 h-6 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
                        </svg>
                        <span x-show="step == '1'" class="text-green-500 group-hover:text-green-900">01</span>
                    </span>
                    
                </a>
                <p :class="step == '1' ? 'text-green-500': 'text-gray-500'" class="mt-2 text-sm font-medium text-gray-500 text-center">step 1</p>                      
                    
                </li>
                <li class="relative md:flex-1 md:flex md:flex-col md:items-center" >                             
                <!-- 最后一个步骤隐藏连接线 -->
                <div class="absolute inset-0 flex items-center hidden" aria-hidden="true">
                    <div class="h-0.5 w-full bg-green-500 ml-10"></div>
                </div>
                <a href="#" class="relative w-8 h-8 flex items-center justify-center bg-white rounded-full" aria-current="step">
                    <span :class="step == '2' ? 'border-green-500': 'border-gray-300'" class="flex-shrink-0 w-10 h-10 flex items-center justify-center border-2 border-gray-300 rounded-full group-hover:border-gray-400">
                        <span :class="step == '2' ? 'text-green-500 group-hover:text-green-900' : ''" class="text-gray-500 group-hover:text-gray-900">02</span>
                    </span>                                  
                </a>
                <p :class="step == '2' ? 'text-green-500': 'text-gray-500'" class="mt-2 text-sm font-medium text-gray-500 text-center">step 2</p>                         
                </li>                            
            </ol>
        </nav>
    </div>
</div>

如果需要进一步调整间距，直接修改gap-x-16的数值即可，比如改成gap-x-20间距会更宽。

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