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

Posted 2023-03-06

【中文标题】覆盖链式选择器上的 Tailwind CSS @apply 指令

【英文标题】：Override Tailwind CSS @apply directive on chained selectors

【发布时间】：2021-12-17 20:21:14

【问题描述】：

有没有办法覆盖链式选择器上的@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;
  

【参考方案1】：

你可以在tailwind.config中设置important:true，这个page可以帮助你。请看下面的代码：

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

【讨论】：

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

你可以设置动态类来解决这个问题没有！重要像这样：:class=""？

就我而言（这与我发布的示例完全不同，其唯一目的是解释问题）我不能使用动态类。目前 ! 前缀是最好的选择，但也许我会在顺风 github 页面上打开一个问题

有几种方法可以解决它。 1）！重要到顺风配置2）动态类:class 3）动态风格:style，最后4）为每个标签设置ID。如果你想选择 3 或 4 种方式，你可以用纯 CSS 来解决它。