css - 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它就可以了。它唯一不起作用的地方是悬停。

score 1 · Accepted Answer

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


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

score 1 · Accepted Answer

对于pepegray，它应该在''（引号）中被称为'pepegray'。在 HTML 中将其称为“悬停：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 回答 2