如何无需感叹号提升Tailwind类优先级？怎样覆盖带!前缀的Tailwind类？

一、不用感叹号提升单个类优先级 #

直接自定义工具类，给目标样式加上!important，同时用Tailwind的@layer指令让它融入Tailwind的样式体系：

1. 在你的CSS文件里加这段代码：

@layer utilities {
  /* 示例：创建高优先级的p-2类，命名可自行修改 */
  .hp-p-2 {
    padding: 0.5rem !important;
  }
}

2. 使用时直接加类名即可，无需感叹号：

<div class="p-1 hp-p-2">test</div>

如果想要更灵活的通用方案，可给Tailwind添加自定义变体：
在tailwind.config.js中添加插件：

module.exports = {
  plugins: [
    function({ addVariant }) {
      addVariant('high-priority', '&');
    }
  ]
}

接着在CSS里扩展工具类：

@layer utilities {
  .high-priority\\:p-2 {
    padding: 0.5rem !important;
  }
}

使用时：

<div class="p-1 high-priority:p-2">test</div>

二、覆盖带!前缀的类（避免无效的!!p-3写法） #

Tailwind的!前缀会给样式加上!important，要覆盖它有两种可行方式：

方法一：靠DOM顺序覆盖 #

1. 在CSS文件中添加自定义覆盖类：

@layer utilities {
  .override-p-3 {
    padding: 0.75rem !important;
  }
}

2. 使用时将该类放在!p-2之后：

<div class="p-1 !p-2 override-p-3">test</div>

同优先级的!important样式，DOM中靠后的类会覆盖靠前的，这样就不用写无效的!!p-3了。

方法二：用更具体的选择器（不依赖顺序） #

结合父元素类提升选择器权重：

.parent .override-p-3 {
  padding: 0.75rem !important;
}

使用时：

<div class="parent">
  <div class="p-1 !p-2 override-p-3">test</div>
</div>

内容的提问来源于stack exchange，提问作者Joseph