Next.js中Tailwind CSS的&:hover特性失效且报错，求解决方案

错误原因 #

你遇到的错误是因为CSS Modules要求选择器必须是“纯”的——即每个选择器必须直接关联到本地类或ID。用逗号合并&:hover, &.active的嵌套写法，不符合CSS Modules的纯选择器规则，因此触发语法错误。

解决方案 #

方案1：拆分嵌套选择器 #

把合并的选择器拆分为单独的嵌套规则，每个规则对应一个状态：

.iconWrapper {
  @apply cursor-pointer flex justify-center items-center h-10 w-10 rounded-md;

  &:hover {
    background-color: theme("colors.text2");
  }
  &.active {
    background-color: theme("colors.text2");
  }
  .icon {
    color: theme("colors.text1");
    font-size: 20px;
  }
}

这种写法完全符合CSS Modules的规则，同时保留了Tailwind的theme()函数和嵌套语法。

方案2：改用Tailwind工具类风格（更推荐） #

直接用Tailwind的内置状态变体和工具类，减少嵌套写法，更贴合Tailwind的设计思路：

.iconWrapper {
  @apply cursor-pointer flex justify-center items-center h-10 w-10 rounded-md hover:bg-text2;
}

.iconWrapper.active {
  @apply bg-text2;
}

.iconWrapper .icon {
  @apply text-text1 text-2xl;
}

注意：要确保text2和text1已经在你的tailwindcss.config.js的colors配置中定义，否则hover:bg-text2这类工具类不会生效。

组件中正确应用active状态 #

在index.js组件里，需要把active类和iconWrapper类结合使用（CSS Modules会自动哈希化类名，避免冲突）：

import styles from './index.module.css';

const Menu = ({ isActive }) => (
  <div className={`${styles.iconWrapper} ${isActive ? styles.active : ''}`}>
    <span className={styles.icon}>你的图标</span>
  </div>
);

export default Menu;

内容的提问来源于stack exchange，提问作者Deepak Anto J