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

Question

有没有一种方法可以在链接选择器上覆盖 @apply 指令？

例如：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;
  }
}

- Fabius

Answer 1

您可以将 important:true 设置到 tailwind.config 中，这个页面可以帮助您。请看下面的代码：

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

- ElsaKarami

---

我不确定在每个实用程序设置!important是否真的是一个安全的选择，就像你链接的页面中所述。在我的情况下，如果应用了display类（如block）的<div>，它会破坏Alpine.js x-show，因为Apline.js设置的是display: none;而不是display: none !important;。目前我正在使用在JIT模式中可用的!前缀，这也在你链接的页面中提到，但感觉像一个黑客：我仍然不明白如果覆盖单个类选择器或链接的类选择器，tailwind为什么会表现不同。 - Fabius

你能否设置动态类来解决这个问题，而不需要使用 !important，像这样：:class=""？ - ElsaKarami

在我的情况下（这与我发布的示例非常不同，那只是为了解释问题），我不能使用动态类。目前来说，! 前缀是最好的选择，但也许我会在 tailwind 的 github 页面上开一个 issue。 - Fabius

有几种解决方法。1）将!important添加到tailwind配置中 2）使用:class创建动态类 3）使用:style创建动态样式，最后4）为每个标签设置ID。如果您想选择第3或第4种方法，可以使用纯CSS来解决它。 - ElsaKarami