如何创建将奇数子伪选择器与tailwindcss结合使用的类

Question

在类中使用odd-child伪选择器时遇到一些困难。奇数：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

我的@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:nth-child(odd)的CSS仅在存在@apply的空tr时才适用。这是Tailwind CSS中的错误吗？我目前正在使用1.9.3，但可以肯定的是，以前的版本在没有第一个代码块（带有空@apply的情况下）都可以正常工作。

AFAIK，odd的{​​{1}}部分中不必包含variants，因为它是默认包含的。