Tailwind CSS 3.3.3任意值Specificity问题：通用样式未被覆盖

问题原因 #

Tailwind 3.3.3的JIT编译器默认会把预定义工具类（比如w-full）的CSS规则生成在任意值工具类（比如w-[80px]）之后。CSS里优先级相同的规则，后面的会覆盖前面的，所以哪怕你在className里把w-[80px]写在w-full后面，实际生效的还是w-full的宽度设置。

可行解决方案 #

1. 给任意值类加!后缀（最快捷）

直接在任意值类名末尾加!，让Tailwind为该样式添加!important声明，强制覆盖同属性的其他规则：

<div className="w-full w-[80px]!">Sample</div>

2. 通过CSS层调整生成顺序（不使用!important）

在你的全局CSS文件中，用@layer utilities包裹自定义的任意值工具类，这样它们会被Tailwind放在工具类规则的最后面，自然覆盖预定义类：

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .w-[80px] {
    width: 80px;
  }
}

之后在组件里正常使用w-full w-[80px]即可生效。

3. 修改Tailwind配置调整工具类生成顺序

如果需要批量处理这类问题，可以修改tailwind.config.js，通过自定义插件确保任意值工具类后生成。示例配置：

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [
    function ({ addUtilities, theme }) {
      // 此插件逻辑确保自定义/任意值工具类生成顺序靠后
      addUtilities({
        // 可根据需求扩展属性范围
      });
    },
  ],
};

内容的提问来源于stack exchange，提问作者Quoc Van Tang