Tailwind中JSX元素动态传值设置高度失效问题排查

我是Tailwind新手，尝试构建类似柱状图的组件，支出数据JSON数组如下：

[
  {
    "day": "mon",
    "amount": 17.45
  },
  {
    "day": "tue",
    "amount": 34.91
  },
  {
    "day": "wed",
    "amount": 52.36
  },
  {
    "day": "thu",
    "amount": 31.07
  },
  {
    "day": "fri",
    "amount": 23.39
  },
  {
    "day": "sat",
    "amount": 43.28
  },
  {
    "day": "sun",
    "amount": 25.48
  }
]

尝试循环数组生成高度与amount成比例的div时，元素不显示。查看DevTools发现元素className正确（如<div class="bg-red w-8 h-[35px] rounded"></div>），但硬编码h-[35px]时有效，通过内联样式设置动态高度也有效：

const Spendings = () => {
  return (
    <div className="flex gap-2.5">
      {spendings.map((spending) => {
        return (
          <div key={spending.day}>
            <div
              className={`bg-red w-8 rounded`}
              style={{ height: spending.amount * 2 }}
            ></div>
            <p className="text-brown-300 text-sm">{spending.day}</p>
          </div>
        );
      })}
    </div>
  );
};

请问我遗漏了什么？

这是Tailwind的核心构建机制导致的问题：Tailwind在打包时只会扫描代码里的静态类名，动态拼接的类名（比如h-[${spending.amount*2}px]）不会被识别，自然不会生成对应的CSS样式。

你在DevTools里看到className正确，但这些动态生成的类名对应的CSS根本没被打包到最终文件里，所以元素没有高度，看起来就像不显示。而内联样式能生效是因为它是运行时直接作用在元素上的；硬编码h-[35px]有效，是因为这个静态类名被Tailwind的构建工具捕获到并生成了对应CSS。

如果想用Tailwind的写法实现动态高度，有两种可行方案：

• 方案一：使用CSS变量
  把动态高度赋值给CSS变量，再用Tailwind的静态类名引用这个变量，这样既能保留Tailwind的写法，又能实现动态效果：

  const Spendings = () => {
    return (
      <div className="flex gap-2.5">
        {spendings.map((spending) => {
          return (
            <div key={spending.day} style={{ '--bar-height': `${spending.amount * 2}px` }}>
              <div className="bg-red w-8 rounded h-[var(--bar-height)]"></div>
              <p className="text-brown-300 text-sm">{spending.day}</p>
            </div>
          );
        })}
      </div>
    );
  };
  

• 方案二：继续使用内联样式
  你当前用的内联样式方案本身就是最直接的解决方式，不需要额外调整，适合动态值范围较大的场景。

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