如何在 tailwindcss 中覆盖 @apply 指令

Question

是否可以覆盖 @apply 指令？

我有这个例子：https://play.tailwindcss.com/kyu6CxnBzB

.item {
  @apply text-black font-light text-opacity-80 py-4 bg-gray-100;
}

<ul>
  <li class="item">About Us</li>
  <li class="item">Success stories</li>
  <li class="item text-red-50 bg-red-800">Contact</li>
  <li class="item">Blog</li>
</ul>

结果如下：

当我预料到的时候

似乎用 apply (item) 定义的第一个类中的值优先于之后指定的任何其他类

你会如何解决这样的场景？创建一个组件（我正在使用 svelte）似乎对此有点过头了，我想要一些方法来避免重复诸如“font-sans text-black text-black text-opacity-80 my-4 hover: text-gray-800 hover:text-underline etc..."

Answer 1

这是 CSS 的属性，而不是顺风。您的选择器的特异性大于顺风实用程序类的特异性。您可以使用@layer 指令通过定义您的类来解决此问题，如下所示：

@layer components {
  .item {
    @apply text-black font-light text-opacity-80 py-4 bg-gray-100;
  }
}

这会在 tailwind 的实用程序类之前声明您的类，因此应该具有较低的特异性。

参考：https://tailwindcss.com/docs/functions-and-directives#layer