React项目中TailwindCSS尺寸类异常渲染问题求助

核心原因1：JSX属性语法错误 #

React的JSX语法中，HTML的class属性必须写成className——因为class是JavaScript的保留字，React不会将class解析为样式类属性，直接导致Tailwind样式完全不生效。

修复后的代码：

export default function Bomb({size = 60, word = 'Bomb'}) {
    return (
        <div className={`h-${size} w-${size} bg-red-500 rounded-full`}>
            <span className="inline-flex h-full w-full items-center justify-center text-3xl">{ word }</span>
        </div>
    )
}

核心原因2：Tailwind动态类名未被编译 #

Tailwind默认仅扫描代码中的静态类名，你用模板字符串拼接的h-${size}、w-${size}会被编译器忽略，导致对应的宽高样式没有生成CSS规则。

解决方法：

• 方案1：直接使用静态类名（如h-60 w-60），适用于size参数固定的场景；
• 方案2：用style属性直接设置宽高：

  <div style={{ width: `${size}px`, height: `${size}px` }} className="bg-red-500 rounded-full">
  

• 方案3：在tailwind.config.js中配置content字段，确保JIT模式能扫描到组件文件路径，识别动态类名的可能取值：

  /** @type {import('tailwindcss').Config} */
  module.exports = {
    content: [
      "./src/**/*.{js,jsx,ts,tsx}", // 覆盖所有组件文件路径
    ],
    theme: {
      extend: {},
    },
    plugins: [],
  }
  

其他可能诱因 #

• 缓存残留：开发服务器或浏览器的缓存可能导致样式未更新，可尝试清理浏览器缓存、重启开发服务器，或删除项目的node_modules/.cache目录；
• 依赖版本冲突：Tailwind或React相关依赖更新后可能出现兼容性问题，可尝试回退到之前正常运行的依赖版本，或查阅Tailwind官方文档确认版本适配规则。

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