在 tailwindcss 中组合变体标志，例如even:bg-颜色-黑色 even:dark:bg-颜色-白色

Question

我使用 tailwindcss 制作了斑马风格的 table。但是现在我需要添加深色模式支持，它不会应用深色模式颜色并保持浅色模式颜色，尽管所有其他颜色都会按预期变化。

我制作了一个有效的 even:bg-color 和无效的 even:dark:bg-color。

<table>
<tr *ngFor="let item of items"
    class="even:bg-stone-light even:dark:bg-slate-darker h-10">
    <td class="w-10 pl-2">{{name}}</td>
</tr>
</table>

这会产生像此处这样的视图，其中（明亮的变体是正确的）：

Answer 1

dark: 应该去 first

The dark variant can be combined with both responsive variants and state variants (like hover and focus): The responsive variant needs to come first, then dark, then the state variant for this to work.

DEMO - 在顶部切换 dark class

在 tailwindcss 中组合变体标志，例如even:bg-颜色-黑色 even:dark:bg-颜色-白色

Combine variant flags in tailwindcss e.g. even:bg-color-black even:dark:bg-color-white

tailwind-css