You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Shadcn主题配置中按钮Hover背景透明度效果不生效问题求助

Shadcn主题配置中按钮Hover背景透明度效果不生效问题求助

各位开发者好,我最近在配置Shadcn按钮样式时碰到了一个奇怪的问题,想过来请教下大家的经验:

我给按钮设置了这样的变体样式:

default: 'bg-primary text-primary-foreground hover:bg-primary/90'

目前的情况是,普通的hover纯色切换完全正常——比如我把hover样式改成hover:bg-red-500,鼠标悬停时背景色能正常切换;但只要用hover:bg-primary/90这种给主题色加透明度的写法,hover状态下背景的透明度完全没有变化,和默认状态的bg-primary看起来一模一样。

我的Tailwind配置文件(tailwind.config.mjs)里的primary主题色配置是这样的:

primary: {
  DEFAULT: 'var(--primary)',
  foreground: 'var(--primary-foreground)',
},

对应的CSS变量是用OKLCH颜色空间定义的:

--primary: oklch(0.8148 0.0819 225.7537);
--primary-foreground: oklch(0.3348 0.0526 161.6917);

我猜测会不会是OKLCH颜色和Tailwind的透明度后缀语法不兼容导致的?有没有大佬遇到过类似的情况,或者能给我一些排查的方向?

内容来源于stack exchange

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.08 14:17:59