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