Tailwind CSS自定义工具类与原子类优先级及字体权重疑问

核心结论 #

自定义扩展的工具类（如你定义的text-regular-12）和Tailwind原生原子类（如font-bold）的选择器优先级完全相同，都是单一类选择器，权重一致。最终生效的样式由CSS规则的定义顺序决定：后定义的CSS规则会覆盖先定义的规则。

你的案例分析 #

1. 你在tailwind.config.js的theme.extend.fontSize中定义的text-regular-12，会生成如下CSS规则：

.text-regular-12 {
  font-size: 12px;
  line-height: 20px;
  font-weight: 400;
}

2. Tailwind原生的font-bold工具类对应的CSS规则是：

.font-bold {
  font-weight: 700;
}

3. 你实际看到字体为bold（700），说明在最终生成的CSS文件中，font-bold的规则定义在text-regular-12之后，因此它的font-weight值覆盖了前者的设置。

让自定义类的font-weight生效的方法 #

• 改用@layer utilities定义自定义工具类：这种方式定义的类会排在原生工具类之后，自然覆盖原生样式，示例：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {},
  },
  plugins: [
    function({ addUtilities }) {
      addUtilities({
        '.text-regular-12': {
          fontSize: '12px',
          lineHeight: '20px',
          fontWeight: '400',
        }
      })
    }
  ]
}

• 使用!important强制提升优先级：在HTML中给自定义类添加!后缀，如class="font-bold text-regular-12!"，不过这种方式不推荐作为常规方案。

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