CSS变量搭配Tailwind自定义颜色变量后hover透明度失效问题

Tailwind的颜色透明度变体（如/90）依赖解析颜色的RGB/RGBA分量生成对应样式。如果直接将primary配置为var(--primary)，Tailwind无法从这个CSS变量中提取具体RGB数值，因此无法生成带透明度的hover样式。

1. 重构CSS变量为RGB数值格式 #

修改globals.css，将--primary替换为RGB数值形式的--primary-rgb（不带rgb()包裹）：

:root {
  --primary-rgb: 59, 130, 246; /* 替换为你的主色RGB值 */
}

.theme-light {
  --primary-rgb: 37, 99, 235; /* 浅色主题下的主色RGB值 */
}

2. 更新Tailwind配置以支持透明度变体 #

在tailwind.config.ts中，调整primary颜色的定义，让Tailwind能识别并处理透明度参数：

export default {
  theme: {
    extend: {
      colors: {
        primary: ({ opacityValue }) => 
          opacityValue ? `rgb(var(--primary-rgb) / ${opacityValue})` : `rgb(var(--primary-rgb))`,
      },
    },
  },
}

这个配置会根据是否有透明度值动态生成对应RGB颜色：

• 无透明度时：rgb(var(--primary-rgb))
• 带透明度时（如/90）：rgb(var(--primary-rgb) / 0.9)

3. 验证效果 #

此时使用hover:bg-primary/90会生成正确的CSS：

.hover\:bg-primary\/90:hover {
  background-color: rgb(var(--primary-rgb) / 0.9);
}

按钮hover时的背景色会正常生效。

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