Tailwind 自定义颜色在悬停时无效答案

【问题标题】：Tailwind custom color is not active on hoverTailwind 自定义颜色在悬停时无效
【发布时间】：2021-06-01 21:31:07
【问题描述】：

我修改了我的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 它会起作用。它唯一不起作用的地方是悬停。

【问题讨论】：

【解决方案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>

【讨论】：

【解决方案2】：

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


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

【讨论】：