时间戳

首页 > 解决方案 > 如何在 tailwindcss 中覆盖 @apply 指令

html - 如何在 tailwindcss 中覆盖 @apply 指令

问题描述

是否可以覆盖@apply 指令？

我有这个例子：https ://play.tai​​lwindcss.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:文本灰色 800 悬停：文本下划线等..."

标签： htmlcsstailwind-css

解决方案

这是 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

推荐阅读