TailwindCSS 1.9版本中Vue项目first、last伪类样式不生效问题排查求助

你的问题核心出在v-for的放置位置错误——你把循环逻辑套在了外层的.container容器上，这导致每个需要设置边框的内层div都被包裹在独立的父容器里。对每个内层div来说，它都是自己父级（循环生成的.container）的第一个也是最后一个子元素，first:和last:伪类的样式会互相抵消，自然达不到预期效果。

修复步骤 #

1. 调整v-for的位置：把循环移到目标内层div上，让所有需要应用伪类的元素处于同一个父容器下：

<div class="container flex flex-col">
  <div 
    class="border-t-2 border-b-2 first:border-t-0 last:border-b-0" 
    v-for="item in items" 
    :key="item.id"
  >
    ...some content
  </div>
</div>

2. 保留正确的Tailwind配置：你之前在tailwind.config.js中的配置是没问题的，不需要修改：

module.exports = {
  variants: {
    borderWidth: ['first', 'last'],
  }
}

生效原理说明 #

当所有循环生成的div都归属于同一个.container父元素时，:first-child和:last-child伪类就能精准匹配列表的首尾项：

• 第一个div会触发first:border-t-0，覆盖默认的border-t-2，移除顶部边框
• 最后一个div会触发last:border-b-0，覆盖默认的border-b-2，移除底部边框
• 中间的所有div则保持上下边框都存在，实现列表项之间的分隔效果

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