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

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>

我的顺风配置文件看起来像这样

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-[xxx] 类旁边有一个像 bg-blue 这样的类，那么您需要扩展 blue 并为 DEFAULT 添加一个键，如下所示：

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

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