如何在Tailwind 4的@theme指令中正确使用hsl()生成颜色变体

问题根源 #

你的代码里有两个关键错误导致颜色变体和原色完全一致：

1. 笔误导致计算逻辑重复：浅色变体的亮度计算写成了calc(l - 5)，和深色变体的公式一模一样，自然生成的颜色没有区别——浅色应该用calc(l + 5)来提高亮度。
2. 虽然CSS的hsl(from ...)语法提取的亮度值l是无单位的百分比数值（比如#006fa0转HSL后亮度约为33），但你的笔误直接让两个变体的计算逻辑完全相同，这是核心问题。

修正后的代码 #

@theme {
    /* 基础主色 */
    --color-primary: #006fa0;

    /* 加深变体：亮度降低5个单位 */
    --color-primary-darken: hsl(from var(--color-primary) h s calc(l - 5));

    /* 变浅变体：亮度提高5个单位 */
    --color-primary-lighten: hsl(from var(--color-primary) h s calc(l + 5));
}

使用说明与注意事项 #

• 直接使用变体类名：用--color-*前缀定义的变量会被Tailwind自动纳入颜色系统，你可以直接写bg-primary-darken、text-primary-lighten这类类名来使用这些变体，完全不需要配置tailwind.config.js。
• 控制亮度范围：如果加减后亮度超出0-100的有效区间，浏览器会自动把数值限制在0或100，但建议提前测试，避免出现过暗或过亮的无效颜色。
• Tailwind 4零配置适配：@theme指令就是为零配置场景设计的，自定义变量会被自动整合到Tailwind的设计系统中，无需额外配置文件。

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