React/TailwindCSS模块名称混淆导致PostCSS嵌套失效问题

我基于Vite+ReactJS+TailwindCSS搭建新项目，尝试用PostCSS实现CSS嵌套规则，基础嵌套可正常工作，但使用SCSS风格的&符号时出现异常。

相关代码与配置 #

Button.module.css：

.Button {
    @apply bg-primary;

    &--disabled {
        @apply opacity-50;
    }
}

组件代码：

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

const Button = ({ label, disabled }) => {
    return (
        <button type="button" className={[
            styles.Button,
            disabled ? 'Button--disabled' : ''
        ]}>
            {label}
        </button>
    );
};

export default Button;

postcss.config.cjs：

module.exports = {
  plugins: {
    'postcss-import': {},
    'tailwindcss/nesting': {},
    tailwindcss: {},
    autoprefixer: {},
  },
}

异常现象 #

浏览器中按钮的HTML：

<button type="button" class="Button _Button_1fcg7_1 Button--disabled">Button</button>

编译后的CSS：

._Button_1fcg7_1 {
    --tw-bg-opacity: 1;
    background-color: rgb(29 161 242 / var(--tw-bg-opacity))
}
._Button--disabled_1fcg7_1 {
    opacity: 0.5
}

可见HTML中的Button--disabled类未被混淆，而CSS中对应的选择器被混淆为._Button--disabled_1fcg7_1，导致样式无法生效。

解决方法 #

1. 核心原因

CSS Modules仅会处理样式文件中直接定义的顶级类名，嵌套生成的&--disabled会被PostCSS转换为带哈希的混淆类名，但组件中直接写字符串'Button--disabled'，没有通过styles对象获取，所以这个类名没有被替换成混淆后的版本，导致不匹配。

2. 修复组件代码

通过styles对象获取嵌套生成的类名（因为类名含连字符，需用方括号语法）：

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

const Button = ({ label, disabled }) => {
    return (
        <button type="button" className={[
            styles.Button,
            disabled ? styles['Button--disabled'] : ''
        ].filter(Boolean).join(' ')}>
            {label}
        </button>
    );
};

export default Button;

• filter(Boolean)用于过滤空字符串，避免生成多余的空格；
• 修复后HTML中的类名会变为_Button_1fcg7_1 _Button--disabled_1fcg7_1，与CSS选择器完全匹配，样式即可生效。

3. 可选优化：用clsx简化类名拼接

安装clsx库（用于更简洁地处理条件类名）：

npm install clsx

修改组件代码：

import clsx from 'clsx';
import styles from './Button.module.css';

const Button = ({ label, disabled }) => {
    return (
        <button type="button" className={clsx(styles.Button, disabled && styles['Button--disabled'])}>
            {label}
        </button>
    );
};

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