如何创建使用带有顺风的奇数伪选择器的类

Question

我在类中使用奇怪的子伪选择器时遇到了一些困难。 Odd：BG-blue-200 在内联使用时工作正常。但是我想提取这种样式，以便我的所有表行在给定类 .tr 时都具有这种样式。我一直在查看文档，但解决方案让我无法找到。我希望这里有人可以提供帮助。

到目前为止，我已经尝试过：

.tr:odd {
@apply bg-blue-200;
}

和

@variants odd {
.tr {
@apply bg-blue-200;
}
}

在 tailwind.config.js 中，我添加了 backgroundColor 变体：

variants: {
'backgroundColor': ['responsive', 'odd', 'hover']
},

Answer 1

只是一个普通的 css 规则就可以与顺风@apply结合使用。(不需要对此进行配置更改。

.tr:nth-child(odd) {
@apply bg-blue-200;
}

Answer 2

在不编写自定义 CSS 规则的情况下实现类似事情的最新方法是将 new(ish( 任意选择器用作单个类以应用于父元素(例如tbody(：

[&>tr:nth-child(odd)]:bg-gray-100

& - self referential
>tr - direct children that are `tr`s
nth-child(odd) - only odd children

Answer 3

我有一个@import "./custom-utilities.css";作为我tailwind.css的最后一行。

我只想在名为.markdown的类下方使用偶数/奇数 CSS，因此我custom-utilities.css中的相关部分如下所示：

.markdown {
& tbody tr {
@apply ;
}
& tbody tr:nth-child(odd) {
@apply bg-gray-100;
}
}

奇怪的是：只有当tr的空@apply存在时，tr:nth-child(odd)的 CSS 才会应用。这是Tailwind CSS中的一个错误吗？我目前正在使用1.9.3，但我确信它曾经在没有第一个块(带有空@apply(的情况下工作。

AFAIK，没有必要在tailwind.config.js的variants部分中包含odd，因为它是默认包含的。