Tailwind CSS中a标签group hover本地不生效，如何配置tailwind.config.css？

首先注意：Tailwind 配置文件后缀为.js，你提到的tailwind.config.css是错误写法，正确配置文件名为tailwind.config.js。

如果你使用的是Tailwind v2.x版本 #

v2版本默认不会为所有工具类开启group-hover变体，需要手动在配置文件的variants字段中扩展对应类的变体：

module.exports = {
  // 其余原有配置保留
  variants: {
    extend: {
      // 你用到了group-hover:block，所以给display类添加group-hover变体
      display: ['group-hover'],
      // 如果后续有其他类需要使用group-hover效果，也在此处对应添加，例如：
      // textColor: ['group-hover'],
      // backgroundColor: ['group-hover']
    }
  }
}

如果你使用的是Tailwind v3.x版本 #

v3默认开启JIT模式，所有变体默认全局支持，不需要额外配置variants，此时不生效优先排查两个问题：

• 检查tailwind.config.js的content字段是否正确覆盖了你写代码的文件路径，确保存放HTML的文件在扫描范围内，示例配置：

module.exports = {
  content: [
    "./**/*.html", // 按你本地项目的实际目录结构调整，保证所有用到Tailwind类的文件都被扫描到
  ],
  // 其余原有配置保留
}

• 检查你当前的HTML代码结构是否完整：你提供的代码中外层.group的div没有闭合标签，补全闭合标签后再测试效果。

通用排查点 #

• 确认本地项目的Tailwind依赖安装正常，修改代码后构建流程会重新生成Tailwind CSS文件
• 不要在生产环境使用CDN版本的Tailwind，默认CDN版本不会包含所有变体的样式

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