悬停时，“顺风”自定义颜色未处于活动状态

Question

我修改了我的顺风。配置。js要添加新的自定义颜色：

module.exports ={
  theme: {
    extend: {
      colors: {
        pepegray: { DEFAULT: "#323232" },
      }
    }
  }
}

现在我希望我的按钮在悬停时改变颜色。

<button className="h-2 w-2 rounded-full bg-silver hover:bg-pepegray m-0.5"></button>

但它不起作用。

有趣的是，如果我写的bg-pepegray它的工作原理。唯一不起作用的地方是悬停。

Answer 1

如果不需要添加颜色托盘，可以将对象作为颜色值移除

module.exports ={
  theme: {
    extend: {
      colors: {
        pepegray: "#323232",
      }
    }
  }
}

Answer 2

对于pepegray，应在“”中（引号）将其称为“pepegray”。在HTML中，它被称为“hover:bg pepegray DEFAULT”

顺风而行。配置。js

module.exports ={
  theme: {
    extend: {
      colors: {
        'pepegray': { DEFAULT: "#323232" },
      }
    }
  }
}

<button className="h-2 w-2 rounded-full bg-silver hover:bg-pepegray-DEFAULT m-0.5"></button>