Next.js组件动态height样式失效：Hero组件传递高度不生效问题

问题出在Tailwind CSS的工作机制上：Tailwind会在构建阶段扫描代码中的静态类名来生成对应的CSS规则，而你通过模板字符串动态拼接的h-[${height}]属于运行时生成的类名，构建时Tailwind无法识别，所以不会生成对应的样式——这就是为什么开发者工具能看到类名，但样式不生效的原因。静态写死的h-[80px]能被扫描到，所以正常生效。

下面是两种可行的解决方法：

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

直接通过style属性设置高度，绕过Tailwind的类名扫描限制，这是处理动态样式最直接的方式：

export default function Hero({
  height,
  children,
}: {
  height: string;
  children: ReactNode;
}) {
  return (
    <div
      className="flex flex-col py-1 bg-red-400 text-white items-center justify-center"
      style={{ height }}
    >
      {children}
    </div>
  );
}

方法2：让Tailwind识别动态类名（适合必须用Tailwind类的场景） #

如果一定要用Tailwind的类名语法，可以在tailwind.config.js中添加safelist，让Tailwind预生成符合特定模式的类：

module.exports = {
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
  ],
  safelist: [
    {
      pattern: /h-\[(.*)px\]/, // 匹配所有h-[xxxpx]格式的类
      variants: ['responsive'],
    },
  ],
}

这种方式需要提前预判可能的高度格式，灵活性不如内联style，所以更推荐第一种方法。

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