Tailwind CSS 的伪类（如 hover:bg-gray-400）未生效，通常并非代码错误，而是因构建流程缺失实时监听或内容扫描路径配置不当，导致相关工具类未被提取到最终 CSS 中。
tailwind css 的伪类（如 `hover:bg-gray-400`）未生效，通常并非代码错误，而是因构建流程缺失实时监听或内容扫描路径配置不当，导致相关工具类未被提取到最终 css 中。
在你提供的 HTML 片段中，按钮使用了 （注：你原文未写出 hover:bg-gray-400，但问题明确指向该类未生效），语法本身完全正确——但 Tailwind 默认不会将所有可能的工具类无差别打包进 CSS。它采用“按需生成”（just-in-time 或 content-aware purging）策略：只有在 content 配置项指定的文件中实际出现过的类名，才会被编译进最终的 output.css。
? 根本原因分析
你的 tailwind.config.js 中配置为：
module.exports = {
content: ["./dist/**/*.{html,js}"],
// ...
}而你的 HTML 文件位于 dist/index.html —— 表面看路径正确。但关键在于：你是否在开发过程中持续运行了 Tailwind 的构建命令？
Tailwind CLI 默认是一次性构建（one-off build）。例如执行：
立即学习“前端免费学习笔记（深入）”；
npx tailwindcss -i ./src/input.css -o ./dist/output.css
该命令仅读取当前 input.css 和 content 扫描路径下的文件，生成一次 CSS。若之后你在 HTML 中新增 hover:bg-gray-400，但未重新运行构建命令，这个类就不会出现在 output.css 中 → 浏览器自然无法应用悬停样式。
✅ 正确做法：开发阶段必须启用 watch 模式，让 Tailwind 持续监听 HTML/CSS/JS 文件变化并自动重建 CSS。
✅ 正确的开发工作流（推荐）
-
确保 content 路径覆盖真实源码位置
你当前扫描 ./dist/**/*，但 HTML 编辑通常发生在 dist/index.html（静态服务）或更常见的 src/index.html（Vite/Next 等框架）。请确认：- 若你直接编辑 dist/index.html，则路径正确；
- 但若你用构建工具（如 Vite、Webpack）或手动复制 HTML 到 dist，应将 content 指向源文件目录，例如：
content: ["./src/**/*.{html,js,ts,jsx,tsx}"],
-
启动带 --watch 的构建命令
在项目根目录下运行（注意双短横 --watch）：npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
? 提示：--watch 会保持进程运行，自动响应文件变更。终端将显示 Watching for changes...。
-
HTML 中正确引用本地 CSS（而非 CDN）
你当前使用 <script src="https://cdn.tailwindcss.com"></script>，这是用于快速原型的 CDN 方案，它默认不启用 JIT 模式且不扫描你的 HTML 内容，因此 hover: 等变体类不会被识别和激活。
✅ 替换为本地构建的 CSS：<link rel="stylesheet" href="./output.css"> <!-- 注意：路径需与 output.css 实际位置一致 -->
? 验证示例（完整可运行片段）
假设 src/input.css 内容为：
@tailwind base; @tailwind components; @tailwind utilities;
dist/index.html 中按钮修正为：
<button class="rounded bg-gray-300 hover:bg-gray-400 mt-4 text-white font-bold h-8 w-1/2 transition-colors duration-200"> Submit </button>
✅ 添加 transition-colors duration-200 可使悬停颜色变化更平滑（非必需，但强烈推荐提升体验）。
⚠️ 注意事项总结
- ❌ 不要依赖 CDN（cdn.tailwindcss.com）进行生产级开发：它无法感知你的 HTML 内容，伪类、响应式断点、自定义变体均受限；
- ✅ content 数组必须精确匹配你实际编写类名的文件路径，通配符 ** 和扩展名 {html,js} 缺一不可；
- ✅ --watch 是开发阶段的必备参数，漏掉即等于“静态快照”，后续修改无效；
- ✅ 检查浏览器开发者工具（Elements → Styles）：若 hover:bg-gray-400 对应的 CSS 规则完全未出现在 output.css 中，说明 Tailwind 根本没提取该类——此时一定是 content 路径错误或未触发 watch 构建；
- ✅ 如使用现代框架（Vite、React、Vue），优先采用官方插件（如 @tailwindcss/vite），它们已内置 watch 与 HMR 支持，无需手动配置 CLI。
遵循以上步骤后，hover:、focus:、disabled:、group-hover: 等所有伪类将立即生效，且体积精简、性能最优。Tailwind 的强大，正源于其“按需生成”的设计哲学——而你只需让构建系统真正“看见”你的代码。
