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

如果不需要添加调色板，可以移除对象作为颜色值


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

Answer 3

我在 Angular 中遇到了同样的问题。我重启了开发服务器，然后好像生效了。其他颜色似乎无需重新启动即可工作。奇怪。

Tailwind custom color is not active on hover