Tailwind css 悬停不会改变文本颜色

如何解决Tailwind css 悬停不会改变文本颜色

我对这个 tailwindcss 完全陌生，我一整天都被这个问题困住了。我很沮丧。这是我的代码

<button className="bg-yellow-500 px-4 py-2 hover:text-black text-white">
        Some Text Here
 </button>

我想要实现的是在按钮悬停时更改文本颜色，当前文本颜色为白色，我希望将其更改为黑色。它没有用。当我使用 chrome 检查工具时，我发现文本颜色 white 有 !important ，我不知道它是怎么发生的。我没有定义它，甚至不知道如何定义。更糟糕的是，如果它的原始颜色不是白色，我可以在悬停时将文本颜色更改为任何颜色。我最初可以使用白色以外的另一种颜色，然后将其更改为我喜欢的任何颜色。如您所见，它非常简单。我可以在 10 秒内用纯 css 完成，不需要一整天。请帮帮我。

如果需要，这里是 tailwind.config 文件，

const colors = require("tailwindcss/colors");

module.exports = {
  purge: ["./src/**/*.{js,jsx,ts,tsx}"],darkMode: false,// or 'media' or 'class'
  theme: {
    BoxShadow: {
      sm: "0 1px 5px #65656599",},extend: {
      fontFamily: {
        body: ["Poppins"],colors: {
        black: {
          hakkei: "#1a1a1a",DEFAULT: "#000",current: "currentColor",gray: colors.blueGray,indigo: colors.indigo,red: colors.rose,yellow: colors.Amber,blue: colors.blue,black: "#333",white: "#fff",aqua: {
          DEFAULT: "#99ced3",dark: "#8abbbf",navy: {
          light: "#99ced3",DEFAULT: "#2f415d",dark: "#1d2a3d",sky: "#00afffc2",purple: colors.purple,borderRadius: {
        "5xl": "5rem","10xl": "10rem","20xl": "50%",height: {
        120: "32rem",150: "40rem",variants: {
    textColor: ["responsive","hover","focus","group-hover"],plugins: [
    "gatsby-plugin-postcss",//require('@tailwindcss/forms'),"@tailwindcss-neumorphism",],};

解决方法

您已经定义了 black 两次。如果您希望黑色的默认值为 #333，则只需添加如下所示的值：

      colors: {
        black: {
          hakkei: "#1a1a1a",DEFAULT: "#333",// it was #000 before
        },

并删除蓝色和白色之间的另一条线。