Tailwind CSS类优先级失效：min-w-0无法覆盖min-w-[10rem]

HTML中类的书写顺序不影响CSS优先级，优先级由CSS规则的权重和样式表中的出现顺序决定。

你用到的两个Tailwind类：

• min-w-[10rem]是自定义长度工具类，Tailwind会在编译时动态生成对应的CSS规则
• min-w-0是预定义工具类，属于Tailwind内置的基础样式

两者的选择器权重完全相同（都是单个类选择器），但如果min-w-[10rem]的CSS规则在样式表中出现在min-w-0之后，根据CSS“后定义规则覆盖先定义规则”的逻辑，就会出现min-w-[10rem]生效的情况，和HTML中类的顺序无关。

以下几种方案任选其一：

• 方案1：使用Tailwind的!important前缀
  把min-w-0改成!min-w-0，Tailwind会生成带!important标记的CSS规则，强制覆盖同权重的其他规则：

  <td class="min-w-[10rem] max-w-[10rem] overflow-ellipsis text-sm text-text-light px-3 !min-w-0"></td>
  

• 方案2：自定义高优先级样式
  在项目的自定义CSS文件中添加一个更具体的选择器规则，比如：

  td.min-w-override {
    min-width: 0;
  }
  

  然后把类加到HTML中：

  <td class="min-w-[10rem] max-w-[10rem] overflow-ellipsis text-sm text-text-light px-3 min-w-override"></td>
  

• 方案3：调整Tailwind配置（进阶）
  在tailwind.config.js中，通过插件把min-w-0的规则重新注册到自定义工具类之后，确保它在样式表中最后出现：

  module.exports = {
    // 其他配置项
    plugins: [
      function({ addUtilities }) {
        addUtilities({
          '.min-w-0': {
            'min-width': '0',
          },
        })
      }
    ]
  }
  

  这种方法不需要修改HTML，但需要重新编译Tailwind样式。

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