使用 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

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

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

Answer 2

您正在尝试将某种 css 类设置为 css 标签。

另外我建议你设置border-collapse: collpase; 到你的桌子，这样，你的单元格之间就不会有分隔。

您必须像下面的演示一样直接设置 css：

 table{ border-collapse: collapse; } tr:nth-child(even) { /*class="bg-gray-50";*/ background: gray; } tr:nth-child(od) { /* class="bg-white";*/ background: white; }

 <table> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </tbody> </table>

Answer 3

Tailwindish 的方式是使用even:someclass或odd:someclass 。 需要先开启，详情看这里

Answer 4

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

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

然后你甚至可以在你的课程中使用：

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

Answer 5

您可以使用@apply 来实现这一点，然后列出要应用于相关元素的顺风类。

tr:nth-child(even) {
    @apply bg-blue-50;
}