使用 Tailwind CSS 将类动态应用到 Table TR 元素的奇数/偶数行的正确方法是什么

Question

尝试在我的 tailwindcss 样式页面中替换行颜色，下面的代码对我的 <tr> 没有影响：

<style>
    tr:nth-child(even) {
        class="bg-gray-50";
    }
    tr:nth-child(od) {
        class="bg-white";
    }
</style>

请问我错过了什么？

Answer 1

添加even前缀odd到您的班级列表

<tbody>
    <tr class="even:bg-gray-50 odd:bg-white"></tr>
</tbody>

请参阅其文档中的第一个、最后一个、奇数和偶数

Answer 2

正如 stefan.at.wpf 提到的，你应该像这样扩展你的 tailwind 配置：

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    extend: {
      backgroundColor: ['even'],
    }
  },
}

然后你甚至可以在你的类中使用，如下所示：

<tr class="even:bg-grey">

Answer 3

在我看来，您正在混合 CSS 样式和 HTML 类。你必须选择其中之一。假设.bg-gray-50对应于#ccc，您可以按如下方式应用样式：

<style>
    tr:nth-child(even) {
        background-color: #ccc;
    }
    tr:nth-child(od) {
        background-color: #fff;
    }
</style>