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
相关产品推荐
相关产品推荐

