使用Tailwind CSS与shadcn/ui时自定义颜色背景不透明度失效问题

问题原因 #

你直接通过CSS变量--primary使用Tailwind的/90不透明度语法时，Tailwind无法在编译阶段解析这个变量的具体HSL值，因此无法生成对应的带透明度的背景色工具类，导致hover样式不生效。Tailwind的/不透明度语法依赖编译时已知的颜色定义（内置颜色或配置文件中声明的自定义颜色）。

解决方案 #

方案1：在tailwind.config.js中配置自定义颜色

这是最符合Tailwind规范的做法，让Tailwind识别你的自定义颜色并自动生成透明度变体：

1. 保持globals.css中的变量定义不变：

:root {
  --primary: 348, 76%, 64%;
}

2. 在tailwind.config.js中扩展颜色主题，将primary关联到你的CSS变量：

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: 'hsl(var(--primary))',
      },
    },
  },
  content: [
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
}

3. 现在直接使用hover:bg-primary/90就能生效，Tailwind会自动生成对应的hsla(348, 76%, 64%, 0.9)背景色样式。

方案2：手动编写CSS hover样式（无需修改配置）

如果不想调整Tailwind配置，可以直接用CSS的hsla语法手动实现hover效果：

1. 给按钮添加一个自定义类，比如btn-primary-hover：

<button className="btn btn-primary-hover">按钮</button>

2. 在globals.css中添加hover样式：

.btn-primary-hover:hover {
  background-color: hsla(var(--primary), 0.9);
}

这样也能实现鼠标悬停时90%不透明度的背景色效果。

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