Tailwind css悬停不改变文本颜色答案

【问题标题】：Tailwind css hover not changing text colorTailwind css悬停不改变文本颜色
【发布时间】：2021-09-25 20:39:49
【问题描述】：

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

【问题讨论】：

请创建minimal reproducible example
我在Tailwind Play 中测试了您的代码，但您的目标是工作。请检查此链接并使用您当前的代码注释掉更详细的信息。 :) play.tailwindcss.com/dHgStQO7DA
这可能是因为您手动添加的颜色替换了现有颜色。在 extends{} 内添加新颜色

标签： css colors hover tailwind-css

【解决方案1】：

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

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

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

【讨论】：