React结合Tailwind JIT条件应用classNames：默认值不生效问题排查

核心错误 #

你的空值合并运算符使用位置完全错了，导致level为null时根本没拿到目标类名：

• 当level = null时，level ?? stylesMap.level[1]会返回字符串"text-5xl"
• 随后你用这个字符串去访问stylesMap.level["text-5xl"]，但你的stylesMap.level的键是数字1，根本不存在"text-5xl"这个键，最终得到undefined，所以classNames里没有生效的类名。

正确写法 #

你需要先给level设置默认的键值1，再去映射对应的样式，两种可行方式：

方式1：解构props时直接设默认值

const ComponentExample = (props) => {
  const { level = 1 } = props;
  return (
    <h1 className={classNames(stylesMap.level[level])}>
      Test
    </h1>
  );
};

方式2：访问样式时设置默认键

const ComponentExample = (props) => {
  const { level } = props;
  return (
    <h1 className={classNames(stylesMap.level[level ?? 1])}>
      Test
    </h1>
  );
};

补充说明 #

之前添加safelist: ["text-5xl"]没效果，是因为组件根本没正确引用到这个类名，自然不会被Tailwind打包。修正逻辑后，只要stylesMap.level[1]能被正确访问到，Tailwind会自动识别这个类（不需要额外配置safelist，除非是动态生成且无法被静态分析的类名）。

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