Tailwind CSS中h-8无法覆盖Icon组件默认h-4的问题排查

这问题的核心是Tailwind的h-*类优先级相同（都是普通类选择器），谁的CSS规则后声明，谁就生效。你遇到的h-8盖不住h-4但h-7/h-9可以，基本跑不出以下两种情况：

情况1：Tailwind配置搞乱了默认spacing的顺序 #

如果你在tailwind.config.js里直接重写了theme.spacing，而不是用theme.extend.spacing添加自定义尺寸，很可能把默认的h-4的CSS规则弄到h-8后面去了：

// 错误示范：直接重写spacing会打乱默认顺序
module.exports = {
  theme: {
    spacing: {
      8: '2rem', // 自定义h-8
      4: '1rem', // 重写默认h-4
      // 未手动添加其他默认spacing值，导致默认规则顺序混乱
    }
  }
}

此时生成的CSS里，h-4的代码在h-8后面，自然会覆盖h-8；而h-7/h-9是你通过extend添加的，它们的CSS会排在所有默认规则后面，所以能盖过h-4。

解决办法：
只用theme.extend.spacing添加自定义尺寸，保留默认spacing的原有顺序：

// 正确写法：仅扩展自定义尺寸
module.exports = {
  theme: {
    extend: {
      spacing: {
        7: '1.75rem',
        9: '2.25rem',
      }
    }
  }
}

情况2：clsx合并类的顺序写反了 #

如果你的组件里，把默认类h-4 w-4放在自定义className后面合并：

// 错误写法：默认类在自定义类后面
const Icon = ({ className, icon, ...props }) => {
  const mergedClasses = clsx(className, 'h-4 w-4');
  return <FontAwesomeIcon icon={icon} className={mergedClasses} {...props} />;
}

虽然HTML里类的顺序不影响CSS优先级，但这种写法本身违背了“自定义类覆盖默认值”的逻辑，且如果项目存在全局样式或JIT模式的类重复问题，可能导致默认类的规则被重复注入到后面。

解决办法：
把默认类放在前面，自定义类放后面，确保自定义类能覆盖默认值：

// 正确写法：默认类在前，自定义类在后
const Icon = ({ className, icon, ...props }) => {
  const mergedClasses = clsx('h-4 w-4', className);
  return <FontAwesomeIcon icon={icon} className={mergedClasses} {...props} />;
}

额外排查：有没有内联样式捣乱 #

如果你给FontAwesomeIcon设置了size属性（比如size="sm"），它会生成内联的width/height样式，内联样式优先级比类高，此时别说h-8，h-7/h-9也盖不住，必须用!h-8。但你提到h-7/h-9能正常覆盖，所以这个情况可以排除。

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