使用TailwindCSS渲染列表时如何避免template标签额外生成divide-y分隔线

AI 小北

2026-10-6

问题原因

Tailwind 的 divide-y 规则本质是给父元素的所有相邻直接子元素添加上边框，对应CSS逻辑为 .divide-y > * + * { border-top-width: 1px; }。
你将 x-for 写在 <template> 标签上时，<template> 本身会作为真实节点存在于ul的直接子节点列表中，循环渲染出来的<li>会排在<template>节点之后，因此选择器会匹配到 template + li，给第一个

额外加上上边框，最终出现多余的分隔线。

原生解决方案（二选一即可）

方案1：直接把x-for写在li元素上（最简便）

AlpineJS的x-for本身支持直接挂载到需要循环的元素上，仅当你需要循环多个同级无包裹元素时才需要套<template>。你这里只需要循环

，直接去掉外层的<template>，把x-for移到

上即可，原有divide-y规则不需要修改就能正常工作：

<ul role="list" class="divide-y divide-gray-200" x-data="taskModel()">
    <li x-for="task in taskList" class="py-4 flex">
        <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
        <div class="ml-3">
            <p class="text-sm font-medium text-gray-900" x-text="task.name"></p>
            <p class="text-sm text-gray-500" x-text="task.email"></p>
            <p class="text-sm text-gray-500" x-text="task.due"></p>
        </div>
    </li>
</ul>

方案2：限定分隔线的作用对象为li元素

如果业务场景必须保留<template>包裹，可以把原来的divide-y divide-gray-200替换为Tailwind原生的任意值修饰符类，明确只给相邻的

加边框，自动忽略template节点：

[&>li+li]:border-t [&>li+li]:border-gray-200

修改后的ul代码示例：

<ul role="list" class="[&>li+li]:border-t [&>li+li]:border-gray-200" x-data="taskModel()">
    <template x-for="task in taskList">
        <li class="py-4 flex">
            <!-- 原有内容不变 -->
        </li>
    </template>
</ul>

两种方案都不需要额外写自定义CSS，完全用Tailwind原生能力实现。

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

相关产品推荐

方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)，限时 9.9 元起

产品介绍相关文档

火山引擎最新活动