React+Tailwind动态尺寸圆形组件仅部分尺寸生效问题求助

在基于create-next-app@latest创建的Next.js项目中，我尝试用HTML的<div>结合Tailwind CSS的尺寸属性实现动态圆形组件，但部分尺寸（比如<Circle diameter="10"/>和<Circle diameter="48"/>）无法正常显示，其他尺寸则能正常渲染。直接在Home组件中写<div className="w-48 h-48 bg-blue-600 rounded-full"></div>能正常显示48px的圆形，但通过props传递尺寸给Circle组件时就失效。相关代码如下：

const Circle = (props) => {
  console.log(`w-${props.diameter} h-${props.diameter}`);
  return (
    <div className={`w-${props.diameter} h-${props.diameter} bg-blue-600 rounded-full`}></div>
  );
}

// 注释掉的另一种组件写法
// const Circle = (size, color) => {
//   console.log(`size:${size} color:${size}`);
//   return (
//     <div className={`w-${size} h-${size} bg-${color} rounded-full`}></div>
//   );
// }

export default function Home() {
  return (
    <main className="flex min-h-screen justify-center items-center py-24 space-x-8">
    
    {/* 直接写能正常显示，但失去动态控制能力 */}
    <div className="w-48 h-48 bg-blue-600 rounded-full"></div>

    {/* 动态尺寸的圆形组件 */}
    {/* 无法显示 */}
    <Circle diameter={48}/>

    {/* 可以正常显示 */}
    <Circle diameter={36}/>
    <Circle diameter={24}/>
    <Circle diameter={12}/>

    {/* 无法显示 */}
    <Circle diameter={10}/>
    </main>
  )
}

这是Tailwind CSS的JIT（即时编译）机制导致的：

• Tailwind会在编译阶段扫描项目源码里静态写死的className，只把这些类对应的CSS生成到最终样式文件中。
• 动态拼接的类名（比如w-${props.diameter}）在编译时无法被Tailwind识别，只有当这个类名已经在其他地方以静态形式出现过（比如Home组件里的w-48），对应的CSS才会存在；如果从未静态出现过（比如w-10），Tailwind不会生成该类的CSS，自然无法显示。

方案1：使用Tailwind动态值语法 #

Tailwind支持用方括号包裹动态自定义值，JIT编译会处理这种形式的类名，只要明确单位即可：

const Circle = (props) => {
  return (
    // 这里假设尺寸单位是px，根据需求可以改成rem等其他单位
    <div className={`w-[${props.diameter}px] h-[${props.diameter}px] bg-blue-600 rounded-full`}></div>
  );
}

方案2：预定义需要的尺寸 #

在tailwind.config.js中扩展theme，提前定义所有可能用到的宽高尺寸，这样Tailwind会预编译这些类的CSS：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      width: {
        '10': '10px',
        '48': '48px',
        // 按需添加更多尺寸
      },
      height: {
        '10': '10px',
        '48': '48px',
      },
    },
  },
  plugins: [],
}

修改配置后，原来的Circle组件代码不需要改动就能正常工作。

方案3：直接用style属性设置宽高 #

如果需要支持任意尺寸，直接通过HTML的style属性设置宽高是最直接的方式，不受Tailwind编译限制：

const Circle = (props) => {
  return (
    <div 
      className="bg-blue-600 rounded-full"
      style={{ 
        width: `${props.diameter}px`, 
        height: `${props.diameter}px` 
        // 单位可根据需求调整
      }}
    ></div>
  );
}

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