React+Tailwind中className无法结合变量与静态CSS的问题求助

问题原因 #

你写的代码里用了单引号'包裹整个className字符串，但ES6模板字符串的变量插值${}只能在**反引号（）**中生效，单引号会把${open ? "w-72" : "w-20"}`当成普通文本直接渲染，所以动态宽度的逻辑不会执行。

直接修复方案（模板字符串） #

把外层的单引号换成反引号，就能正常解析动态变量了：

<div className={`bg-black h-screen p-5 pt-8 ${open ? "w-72" : "w-20"}`}></div>

其他可选方案 #

如果觉得模板字符串不够直观，还可以用以下方式：

• 数组拼接法：把静态类和动态类放到数组里，再用空格拼接

<div className={['bg-black h-screen p-5 pt-8', open ? "w-72" : "w-20"].join(' ')}></div>

• clsx工具库（适合复杂场景）：专门用于处理条件类名拼接，减少代码冗余
  先安装依赖：

npm install clsx

然后使用：

import clsx from 'clsx';

<div className={clsx('bg-black h-screen p-5 pt-8', { 'w-72': open, 'w-20': !open })}></div>

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