使用TailwindCSS时，如何避免模板在渲染列表时向divide-y添加分隔线？

Question

Divide-y 用于在堆叠元素之间添加分隔线。然而，当使用 AlpineJS (x-for) 和 TailwindCSS 渲染列表时，我们发现模板标签导致 CSS 也在此处添加分隔线，这是不希望有的效果。

有没有一种顺风方式可以防止这种情况发生？

例如

<ul role="list" class="divide-y divide-gray-200" x-data="taskModel()">
    <template x-for="task in taskList">
        <li 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>
    </template>
</ul>

<script>
    function taskModel() {
        return {
            taskList: [
                {
                    name: 'Calvin Hawkins',
                    email: 'calvin.hawkins@example.com',
                    due: '2021-08-28'
                }
            ]
        };
    }
</script>

谢谢你！

Answer 1

这是一个有据可查且已得到充分解释的问题。如文档中所述https://tailwindcss.com/docs/upgrading-to-v2#add-hidden-to-any-template-tags-within-space-or-divide-elements您需要做的就是添加hidden属性到您的模板标签。

在你的情况下，代码应该是：

<ul role="list" class="divide-y divide-gray-200" x-data="taskModel()">
    <!-- Add hidden attribute -->
    <template x-for="task in taskList" hidden>
        <li 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>
    </template>
</ul>

<script>
    function taskModel() {
        return {
            taskList: [
                {
                    name: 'Calvin Hawkins',
                    email: 'calvin.hawkins@example.com',
                    due: '2021-08-28'
                }
            ]
        };
    }
</script>