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
        },

並刪除藍色和白色之間的另一條線。