CSS Grid搭配Tailwind开发页脚出现多余左侧分割线问题求解

• 错误1：divide-x是Tailwind提供的父容器专用类，作用是给当前元素的直接子元素之间添加横向分隔线，不需要加在子项上。你给4个导航子项<div>都加了divide-x，属于冗余类，会触发不必要的边框渲染。
• 错误2：你在<nav>上写的divide-x是全断点生效的，但你只在sm及以上断点（flex布局场景）需要分隔线，小屏grid布局场景下不需要。同时你仅给sm断点设置了分隔线颜色sm:divide-white，小屏下分隔线会渲染为默认边框色，就出现了你看到的左侧异常线条。

1. 移除所有导航子项<div>上的divide-x类
2. 把<nav>上全断点生效的divide-x改为sm:divide-x，仅在flex布局的断点下启用分隔线

<nav
  class="grid grid-cols-2 gap-6 sm:flex sm:justify-center sm:text-md lg:justify-end sm:divide-x sm:divide-white text-white"
>
  <div
    v-for="item in [navigation[0], navigation[1]]"
    :key="item.name"
    class="text-center w-auto px-3"
  >
    <a :href="item.href" class="text-white">
      {{ t(item.name) }}
    </a>
  </div>
  <div
    v-for="item in [navigation[2], navigation[3]]"
    :key="item.name"
    class="text-center w-auto px-3"
  >
    <a :href="item.href" class="text-white">
      {{ t(item.name) }}
    </a>
  </div>
</nav>

内容的提问来源于stack exchange，提问作者Tomas Gil Amoedo