传递Props时Tailwind宽高类不生效的问题解决求助

问题根源 #

Tailwind CSS的JIT编译器只会扫描源码中静态存在的类名，像w-${width}这种动态拼接的类名，编译器在构建阶段无法预知所有可能的取值，因此不会生成对应的CSS规则。

你之前偶然生效的情况是因为：当你传入className="w-10 h-10"时，这两个静态类名被Tailwind编译并生成了CSS，浏览器缓存了这些样式；之后即使移除className，再传width="10"时，w-10类已经存在于缓存的CSS中，所以能生效，但其他未被提前编译的尺寸（比如32）就没有对应的CSS规则，自然不生效。

解决方案 #

方案1：限制为Tailwind预设尺寸（固定场景推荐） #

如果你的Box组件只需要支持Tailwind预设的尺寸（比如w-32对应8rem），可以先定义允许的尺寸类型，确保类名能被编译器扫描到：

// 定义支持的尺寸（按需扩展Tailwind预设的尺寸值）
type TailwindSize = "0" | "1" | "2" | "4" | "8" | "16" | "32" | "40" | "64";

export default function Box({ className = "", width, height }: { 
  className?: string; 
  width: TailwindSize; 
  height: TailwindSize 
}) {
  return (
    <div className={`w-${width} h-${height} ${className}`}></div>
  );
}

注：TailwindSize需要列出你实际会用到的所有预设尺寸，Tailwind编译器会扫描到这些静态组合的类名并生成对应CSS。

方案2：使用内联样式支持任意尺寸（灵活场景首选） #

如果需要支持任意单位（比如px、rem、%），直接用style属性设置宽高是最直接的方式，完全避开Tailwind的编译限制：

export default function Box({ className = "", width, height }: { 
  className?: string; 
  width: string; 
  height: string 
}) {
  return (
    <div className={className} style={{ width, height }}></div>
  );
}

调用示例：

<Box width="32px" height="32px" />
<Box width="50%" height="10rem" />
<Box width="200px" height="auto" className="bg-blue-500" />

方案3：自定义Tailwind工具类（进阶场景） #

如果想通过类名方式支持动态尺寸，可以在Tailwind配置中自定义工具类：

1. 修改tailwind.config.js：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [
    function ({ addUtilities }) {
      addUtilities({
        '.custom-w': ({ value }) => ({ width: value }),
        '.custom-h': ({ value }) => ({ height: value }),
      })
    }
  ],
}

不过这种方式需要结合Tailwind的特殊语法，不如内联样式直观，一般不推荐。

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