Tailwind 自定义颜色在悬停时未激活

Question

我修改了我的 tailwind.config.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

对于pepegray，它应该在''（引号）中被提及为'pepegray'。 在 HTML 中提到它为 'hover:bg-pepegray-DEFAULT'

在tailwind.config.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>

Answer 2

如果不需要添加调色板，可以去掉object作为颜色值

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