如何在 tailwindcss 中覆盖 @apply 指令

Question

是否可以覆盖@apply指令？

\n

我有这个例子：https ://play.tai​​lwindcss.com/kyu6CxnBzB

\n

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

\n

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

\n

结果如下：

\n

\n

当我期待的时候

\n

\n

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

\n

你会如何解决这样的场景？创建一个组件（我正在使用 svelte）似乎对此太过分了，我\xc2\xb4d喜欢某种方法来避免重复诸如“font-sans text-black text-black text-opacity-80 my-”之类的内容4 悬停：文本灰色-800 悬停：文本下划线等...”

\n

Answer 1

这是 CSS 的属性，而不是 Tailwind。选择器的特殊性大于 tailwinds 实用程序类的特殊性。您可以使用该@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