覆盖链式选择器上的 Tailwind CSS @apply 指令

有什么办法可以覆盖@apply关于链式选择器的指令？

例子：https://play.tai​​lwindcss.com/2nmGe5yad3 https://play.tailwindcss.com/2nmGe5yad3

HTML

<ul>
  <li class="class-one class-two">Item 1</li>
  <li class="class-one class-two">Item 2</li>
  <li class="class-one class-two text-red-50 bg-red-800">Item 3</li>
  <li class="class-one class-two">Item 4</li>
</ul>

CSS

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  /* also doesnt work with "li.class-one" selector, works only with ".class-one" selector */
  .class-one.class-two {
    @apply text-black bg-gray-100;
  }
}

你可以设置important:true进入 tailwind.config，这个page https://sebastiandedeyne.com/why-we-use-important-with-tailwind/可以帮助你。请看下面的代码：

module.exports = {
  mode: 'jit',
  important: true,
  theme: {},
  variants: {},
  plugins: [],
}