Tailwind text utility类添加后未被覆盖：按钮文本颜色未更新

问题出在你当前的类名生成逻辑中：当同时启用primary和outline时，会同时输出text-white和text-blue-500两个类。由于Tailwind CSS的工具类优先级相同，且text-white的样式规则在CSS文件中比text-blue-500后定义，优先级相同的情况下后定义的样式会覆盖先定义的，所以最终text-white生效，文字依然显示白色。

修复方案 #

调整类名生成逻辑，让text-white仅在非outline状态下添加，同时拆分outline状态下的主题边框样式：

const classes = className('flex items-center px-3 py-1.5 border', {
  // 非outline状态：包含边框、背景色和文字白色
  'border-blue-500 bg-blue-500 text-white': primary && !outline,
  'border-gray-900 bg-gray-900 text-white': secondary && !outline,
  'border-green-500 bg-green-500 text-white': success && !outline,
  'border-yellow-400 bg-yellow-400 text-white': warning && !outline,
  'border-red-500 bg-red-500 text-white': danger && !outline,
  // outline状态：仅保留主题边框
  'border-blue-500': primary && outline,
  'border-gray-900': secondary && outline,
  'border-green-500': success && outline,
  'border-yellow-400': warning && outline,
  'border-red-500': danger && outline,
  // 其他通用样式
  'rounded-full': rounded,
  'bg-white': outline,
  'text-blue-500': outline && primary,
  'text-gray-900': outline && secondary,
  'text-green-500': outline && success,
  'text-yellow-400': outline && warning,
  'text-red-500': outline && danger,
})

效果验证 #

修改后，使用<Button primary outline rounded>some text</Button>时，生成的类名将不再包含text-white，最终类名为：

class="flex items-center px-3 py-1.5 border border-blue-500 rounded-full bg-white text-blue-500"

此时text-blue-500会正常生效，文字显示蓝色。

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