Tailwind CSS自定义HSL带透明度颜色未按预期生效

你的问题出在CSS变量的HSL格式与Tailwind透明度修饰符的兼容性上：

你定义的--primary变量用了逗号分隔的四参数HSL格式（包含alpha值1），而Tailwind的/75透明度修饰符会在颜色值后追加 / <opacity>语法，导致最终生成的HSL表达式语法错误——原本的hsl(var(--primary))会被处理为hsl(256, 92%, 63%, 1 / 0.75)，这不符合CSS HSL语法规范，浏览器无法正确解析，因此显示异常偏白。

修复步骤 #

1. 修改CSS变量的HSL格式：去掉alpha参数，改用空格分隔的三参数HSL值（Tailwind推荐格式）：

@layer base {
  --primary: 256 92% 63%;
  --primary-foreground: 210 40% 98%;
}

2. 保持Tailwind配置不变：

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

3. 正常使用Tailwind透明度修饰符：

<div className="min-h-[380px] rounded-2xl border-2 border-dashed border-primary/75">
...
</div>

此时Tailwind会自动将border-primary/75解析为符合规范的hsl(256 92% 63% / 0.75)，颜色显示效果和直接写border-[#784AF7]/75完全一致。

补充说明 #

如果需要给基础色设置默认alpha值，可以在Tailwind配置里直接定义：

DEFAULT: 'hsl(var(--primary) / 1)',

后续使用/75时，Tailwind会自动替换alpha值为0.75，不会出现语法冲突。

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