Tailwind中focus-visible:bg-primary-50类不存在问题咨询

核心原因 #

你定义的--primary是单一固定的HSL颜色值，而非包含不同明度层级（比如50、100、200）的颜色集合，Tailwind不会自动为自定义主色生成带数字后缀的明度变体类：

• 你在:root里的--primary是222.2 47.4% 11.2%，这是一个具体的深色值，Tailwind只会识别bg-primary这类直接映射该变量的类，无法解析primary-50这种不存在的明度变体。
• 其他focus-visible:xxx类（比如focus-visible:ring-transparent）能正常工作，是因为这些是Tailwind内置的工具类，和自定义颜色变量无关，不受颜色变体的限制。

解决办法 #

如果你需要primary-50这类浅色调的颜色变体，有两种可行方式：

1. 在tailwind.config.js中配置颜色层级
   把primary颜色定义为包含不同明度的对象，让Tailwind自动生成对应的变体类：

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50: 'hsl(222.2 47.4% 95%)', // 自定义浅色调
          DEFAULT: 'hsl(222.2 47.4% 11.2%)', // 你的主色
        },
      },
    },
  },
}

2. 手动定义--primary-50变量
   在@layer base的:root中添加该变量，然后使用Tailwind的任意值语法调用：

@layer base {
  :root {
    --primary: 222.2 47.4% 11.2%;
    --primary-50: 222.2 47.4% 95%; // 手动添加浅色调变量
    // ...其他变量
  }
}

然后在类中使用：

<div class="select-item focus-visible:bg-[hsl(var(--primary-50))]">...</div>

另外，如果你只是想要主色的浅化效果，也可以直接用Tailwind的bg-primary/10这类透明度变体，模拟类似50明度的视觉效果。

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