如何用Tailwind CSS创建带连线的赛事对阵图

可以通过添加辅助连线容器，结合Tailwind的边框、布局类来实现，几乎不需要额外自定义CSS。以下是修改后的完整代码：

<div class="flex">
  <div class="w-72 m-8 text-center text-xl">Quarterfinals Round</div>
  <div class="w-72 m-8 text-center text-xl">Semifinals Round</div>
  <div class="w-72 m-8 text-center text-xl">Final Round</div>
</div>
<div class="flex items-start">
  <!-- 四分之一决赛 -->
  <div class="flex-col m-4">
    <div class="bg-gray-900 w-72 h-20 m-4"></div>
    <div class="bg-gray-900 w-72 h-20 m-4"></div>
    <div class="bg-gray-900 w-72 h-20 m-4"></div>
    <div class="bg-gray-900 w-72 h-20 m-4"></div>
  </div>

  <!-- 第一轮连线：四分之一 -> 半决赛 -->
  <div class="flex flex-col items-center justify-between my-4">
    <div class="w-8 border-t border-gray-900"></div>
    <div class="h-[64px] border-l border-gray-900"></div>
    <div class="w-8 border-t border-gray-900"></div>
    <div class="h-[144px] border-l border-gray-900"></div>
    <div class="w-8 border-t border-gray-900"></div>
    <div class="h-[64px] border-l border-gray-900"></div>
    <div class="w-8 border-t border-gray-900"></div>
  </div>

  <!-- 半决赛 -->
  <div class="flex-col m-4">
    <div class="bg-gray-900 w-72 h-20 m-4"></div>
    <div class="h-[88px]"></div>
    <div class="bg-gray-900 w-72 h-20 m-4"></div>
  </div>

  <!-- 第二轮连线：半决赛 -> 决赛 -->
  <div class="flex flex-col items-center justify-between my-4">
    <div class="w-8 border-t border-gray-900"></div>
    <div class="h-[112px] border-l border-gray-900"></div>
    <div class="w-8 border-t border-gray-900"></div>
  </div>

  <!-- 决赛 -->
  <div class="flex-col m-4">
    <div class="bg-gray-900 w-72 h-20 m-4"></div>
  </div>
</div>

实现说明： #

• 将外层容器的items-center改为items-start，让每轮模块顶部对齐，保证连线布局精准
• 新增两个垂直排列的连线容器，通过justify-between让连线自动匹配上下卡片的间距
• 用border-t（横向短线）和border-l（纵向长线）组合成对阵连接线条，通过调整h-*类的高度适配卡片间的空隙
• 所有样式均使用Tailwind内置类，仅需调整数值类（如h-[64px]）即可适配不同的卡片尺寸

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