顺风文本颜色在悬停时不会改变

Question

我试图让按钮中的文本颜色在我将鼠标悬停在按钮上时发生变化，但它不起作用... 我的 React 代码是这样的

<button className="px-4 py-2 bg-blue-500 text-light hover:bg-light hover:border-2 hover:border-blue-500 hover:text-blue-500">Sign Up</button>

我的 tailwind 配置文件如下所示

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

module.exports = {
    purge: [],
    darkMode: false, // or 'media' or 'class'
    theme: {
        extend: {
            colors: {
                light: "#e2f3f5",
                teal: "#22d1ee",
                blue: "#3d5af1",
                dark: "#0e153a",
            },
        },
    },
    variants: {
        extend: {
            fontSize: ["hover", "focus"],
            backgroundOpacity: ["active"],
            borderWidth: ["hover", "focus"],
            textColor: [
                "responsive",
                "dark",
                "group-hover",
                "focus-within",
                "hover",
                "focus",
            ],
        },
    },
    plugins: [],
};

但是悬停时文本颜色没有改变。有人可以帮我吗？

Answer 1

您的问题是您正在尝试扩展 Tailwind 的基本主题，并且您的自定义颜色之一称为蓝色。通过这样做，您使 bg-blue-500 不存在。如果你想扩展蓝色，你可以按照这里的解释添加阴影 https://tailwindcss.com/docs/customizing-colors#extending-the-defaults 但这样做你已经替换了蓝色而不是扩展它。

一旦你删除了一切都应该工作，你甚至不需要在你的配置中有所有那些扩展的 textColor 变体。

这里正在开发 Tailwind Play https://play.tailwindcss.com/7CUThekLY1?file=config

但是，如果您真正想要的是像 bg-blue 这样的 class 与其他 bg-blue-[xxx] class 一起使用，那么您需要扩展蓝色并添加一个DEFAULT 的键像这样：

...
theme: {
        extend: {
            colors: {
                light: "#e2f3f5",
                teal: "#22d1ee",
                dark: "#0e153a",
                blue: {
                  'DEFAULT': '#f00'
                }
            },
        },
    },
...

这是一个示例，我将 bg-blue 设为红色以供演示。 https://play.tailwindcss.com/VYDBylQOPu

顺风文本颜色在悬停时不会改变

Tailwind text color not changing on hover

css

hover

textcolor

reactjs

tailwind-css