Tailwind CSS hover状态失效：导航栏hover时文本颜色未变白

我正在为单页网站的导航栏设置样式，目标是鼠标悬停在包裹按钮的div上时，除了将背景色改为深绿色（该功能已正常生效），还要让按钮文本变为白色以保证可见性。但即便给div添加了hover:text-white类，按钮文本颜色仍未发生变化。

我的代码： #

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href = "build/output.css">
        <title>Food Reviews</title>
    </head>
    <body>
        <div class="grid grid-cols-2 mt-1 ml-2 border-b-2 border-gray-700 bg-gray-200">
            <h1 class="text-cyan-400">Food Reviews</h1>
            <div class="grid grid-cols-3 ml-64 gap-5 mr-3 mb-1">
                <div class="border-4 border-green-700 rounded-lg bg-green-300 hover:bg-green-600 hover:text-white">
                 <button class="text-green-600 col-span ">Asian Cuisine</button>
                 </div>
                 <div class="border-4 border-green-700 rounded-lg bg-green-300 hover:bg-green-600">
                    <button class="text-green-600 col-span">European Cuisine</button>
                </div>
                <div class="border-4 border-green-700 rounded-lg bg-green-300 hover:bg-green-600">
                    <button class="text-green-600 col-span-1 pl-2">American Cuisine</button>
                </div>
            </div>
        </div>

    </body>
</html>

src CSS文件

@tailwind base;
@tailwind components;
@tailwind utilities;

问题出在CSS优先级：按钮自身的text-green-600类是直接作用在button元素上的，优先级比父元素div继承过来的hover:text-white样式更高，所以悬停时文本颜色不会被覆盖。

有两种简单的解决方式：

方式1：使用Tailwind子元素悬停变体 #

给div添加针对子按钮的悬停样式，用hover:>button:text-white指定当div悬停时，内部的button元素应用白色文本。修改后的div示例：

<div class="border-4 border-green-700 rounded-lg bg-green-300 hover:bg-green-600 hover:>button:text-white">
  <button class="text-green-600 col-span ">Asian Cuisine</button>
</div>

这种方式适合需要保留按钮自身原有样式的场景。

方式2：让按钮继承父元素的文本颜色 #

去掉button上的text-green-600类，把这个类移到div上。这样平时按钮文本继承div的绿色，悬停时div的hover:text-white会让按钮自动继承白色文本。修改后的结构示例：

<div class="border-4 border-green-700 rounded-lg bg-green-300 text-green-600 hover:bg-green-600 hover:text-white">
  <button class="col-span ">Asian Cuisine</button>
</div>

这种方式更简洁，适合按钮颜色完全跟随父元素状态的场景。

内容的提问来源于stack exchange，提问作者user19417266