使用 TailwindCSS 时，如何避免模板在呈现列表时将分隔符添加到 divide-y？

Question

Divide-y 用于添加分隔符 'in between' 堆叠元素。然而，当使用 AlpineJS (x-for) 和 TailwindCSS 呈现列表时，我们发现模板标签导致 CSS 也在那里添加一个分隔符，这是一个不受欢迎的效果。

是否有 Tailwind 方法来防止这种情况？

例如

<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

这很漂亮well documented and accounted for issue. As described in the docs 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>

使用 TailwindCSS 时，如何避免模板在呈现列表时将分隔符添加到 divide-y？

When using TailwindCSS, how do I avoid the template from adding a divider to divide-y when rendering a list?

tailwind-css

alpine.js