使用 TailwindCSS 时，如何避免模板在渲染列表时将分隔符添加到分隔符？

Posted 2023-03-07

【中文标题】使用 TailwindCSS 时，如何避免模板在渲染列表时将分隔符添加到分隔符？

【英文标题】：When using TailwindCSS, how do I avoid the template from adding a divider to divide-y when rendering a list?

【发布时间】：2021-10-23 23:43:41

【问题描述】：

Divide-y 用于在堆叠元素之间添加分隔符。然而，当使用 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" >
            <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: '[e-mail]',
                    due: '2021-08-28'
                
            ]
        ;
    
</script>

谢谢！

【参考方案1】：

这是一个漂亮的well documented 并解决了问题。如文档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" >
            <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: '[e-mail]',
                    due: '2021-08-28'
                
            ]
        ;
    
</script>