PostCSS+Tailwind+Webpack环境下特定场景hover伪类失效求助

问题概况 #

在Webpack打包的PostCSS+Tailwind开发环境中，全站复用的通用按钮模块（样式文件src/styles/module/_btn.css）出现异常：当按钮被放置在带有_hero.css定义类名的div容器内时，按钮的默认样式正常生效，但hover伪类完全无响应；将按钮移出该容器后，hover样式（修改背景透明度）可正常工作。

相关代码位于仓库的hero分支，核心文件包括：

• HTML入口：src/index.html
• 主样式文件：src/styles/global/style.css
• 模块样式：src/styles/module/_hero.css、src/styles/module/_btn.css

已尝试方案 #

• 使用!important强制提升hover样式优先级
• 将相同hover样式移入_hero.css文件
• 尝试过AI工具给出的常规调试建议

排查与解决方向 #

1. 检查CSS选择器优先级与覆盖情况 #

打开浏览器开发者工具（F12），选中容器内的按钮并触发hover状态，查看「样式」面板：

• 确认自定义的.btn:hover规则是否被划掉（被更高优先级样式覆盖）
• 查看是否有Tailwind内置hover样式或其他模块样式抢占了优先级
• 若存在覆盖，改用更具体的选择器（如.hero-section .btn:hover）替代通用.btn:hover，避免依赖!important

2. 验证CSS文件引入顺序 #

检查主样式文件style.css的模块引入顺序：

• 确保_btn.css在_hero.css之后引入，让按钮的hover样式拥有更高层叠优先级
• 示例正确引入顺序：

@import "../module/_hero.css";
@import "../module/_btn.css";

3. 排查容器的pointer-events属性 #

检查_hero.css中容器类的样式，是否设置了pointer-events: none：

• 若容器禁用指针事件，会导致内部元素无法触发hover，需给按钮单独设置：

.btn {
  pointer-events: auto;
}

4. 检查Tailwind配置与冲突 #

• 查看tailwind.config.js中是否有自定义hover变体或插件，干扰按钮hover状态
• 尝试在按钮类上显式添加Tailwind hover样式（如hover:bg-opacity-80），对比自定义样式的生效情况，排查规则冲突

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