React+Tailwind渲染的柱状图div无高度问题求助

核心原因 #

你遇到的问题并非Tailwind的bug，而是Tailwind CSS的静态编译机制导致的：Tailwind在构建阶段会静态扫描代码中所有明确写出的类名，动态拼接的类名（比如h-[${bar}px]这种模板字符串生成的）不会被识别，因此对应的height样式不会被生成，最终div没有高度。

解决方案 #

方案1：使用内联style属性（推荐）

直接将动态高度通过style属性设置，绕过Tailwind的静态扫描限制，这是最直接的解决方式：

export const Diagram = () => {
    const [bars, setBars] = useState<number[]>(initArray(20, 100, 10))
    return (
         <>
       <Card>
        <CardContent>
             <div className="flex flex-row items-end justify-items-center p-8">
              {bars.map((bar, index) => (
                <div
                  key={index}
                  className="w-auto bg-[#16a249] mx-2"
                  style={{ height: `${bar}px` }}
                ></div>
            ))}
             </div>
            </CardContent>
       </Card>
     </>
    )
}

方案2：结合CSS变量（可选）

如果坚持要用Tailwind的语法，可以通过CSS变量间接传递动态值，Tailwind支持解析CSS变量：

export const Diagram = () => {
    const [bars, setBars] = useState<number[]>(initArray(20, 100, 10))
    return (
         <>
       <Card>
        <CardContent>
             <div className="flex flex-row items-end justify-items-center p-8">
              {bars.map((bar, index) => (
                <div
                  key={index}
                  className="w-auto bg-[#16a249] mx-2 h-[var(--bar-height)]"
                  style={{ '--bar-height': `${bar}px` } as React.CSSProperties}
                ></div>
            ))}
             </div>
            </CardContent>
       </Card>
     </>
    )
}

额外检查点 #

• 确认initArray函数返回的bars数组中的数值都是正整数，如果数值为0或负数，div同样会没有高度，可以通过console.log(bars)验证数值是否符合预期。

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