Blazor网站Tailwind CSS hover悬停效果不显示的解决求助

可能的原因及对应解决方案 #

1. 自定义颜色未在Tailwind配置中注册 #

你使用的hover:bg-main-colour属于自定义颜色类，如果没在tailwind.config.js里定义main-colour，Tailwind会直接忽略这个类，自然不会生效。

解决方法：
打开项目根目录的tailwind.config.js，在theme.extend.colors中添加自定义颜色：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./**/*.{razor,html,cshtml}", // 确保扫描所有Blazor组件文件
    "./wwwroot/**/*.html"
  ],
  theme: {
    extend: {
      colors: {
        'main-colour': '#你的颜色值', // 替换成实际颜色码，比如#165DFF
      },
    },
  },
  plugins: [],
}

2. Tailwind未扫描到Blazor组件中的类 #

如果tailwind.config.js的content配置没包含Blazor的.razor或.cshtml文件，Tailwind会把未识别的类从最终CSS中剔除，包括hover变体类。

解决方法：
确认content数组覆盖了所有Blazor组件路径，比如上面配置里的./**/*.{razor,html,cshtml}，确保项目内所有组件文件都被扫描到。

3. 样式优先级冲突 #

虽然Tailwind的hover变体优先级高于基础类，但如果存在全局CSS或其他自定义样式强制设置了按钮背景，可能会覆盖hover效果。

排查方法：
用浏览器开发者工具选中按钮，切换到:hover状态，查看Styles面板里的background-color是否被划掉（表示被更高优先级样式覆盖）。可以临时给hover类加!important验证：

<button class="outline outline-1 outline-black rounded-lg p-1 bg-white w-[35px] h-[35px] hover:bg-main-colour!">
    T
</button>

如果生效，就说明是优先级冲突，需要排查全局样式或其他自定义CSS的影响。

4. 静态资源缓存问题 #

浏览器缓存旧CSS文件也会导致新的hover类无法加载。

解决方法：

• 按Ctrl+F5强制刷新浏览器
• 重启Blazor开发服务器
• 检查引入Tailwind的CSS文件（比如wwwroot/css/app.css）是否正确编译了最新样式

验证步骤 #

1. 保存tailwind.config.js修改后，重启Tailwind构建进程（如果用了watch模式）
2. 打开浏览器开发者工具，选中按钮并切换到:hover状态，确认hover:bg-main-colour对应的样式存在且未被覆盖

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