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

Question

我对这个 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",
  ],
};

Answer 1

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

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

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