如何在Vue3的v-for循环中应用Tailwind的divide分隔样式？

你的问题出在divide-y类的应用位置错误——Tailwind的divide-y是给包含多个同级子元素的父容器使用的，目的是在容器内的子元素之间添加垂直分隔线。而你现在把它放在了v-for循环生成的每个外层div上，每个这样的div内部只有一个子元素，自然不会显示分隔线。

正确写法 #

把divide-y divide-red-400加到包裹所有循环子元素的父容器上，v-for移到内部的子div中：

<div class="divide-y divide-red-400">
  <div v-for="i in [1, 2, 3]" :key="i">{{ i }}</div>
</div>

替代方案（若需每个循环项为独立容器） #

如果业务需求要求每个循环项是单独的外层div，可以用border-b配合Tailwind的last:伪类实现分隔线，给除最后一项外的所有元素添加底部边框：

<div v-for="i in [1, 2, 3]" :key="i" class="border-b border-red-400 last:border-b-0">
  <div>{{ i }}</div>
</div>

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