TailwindCSS中通过Props传递断点宽度不生效问题求助

我在项目中遇到问题：通过props传递width值到Tailwind的lg断点类中时完全不生效。相关代码如下：

<div className={'border-b-[1px] w-[50%] lg:' + props.width + ' text-thirdMainColor ' + props.margin }></div>

我尝试在tailwind.config.js中添加断点配置，但没有任何变化，配置内容：

theme: {
  screens: {
    sm: '480px',
    md: '768px',
    lg: '976px',
    xl: '1440px',
  },
}

其他非动态拼接的写法可以正常工作。

Tailwind的JIT编译器需要在构建阶段明确识别所有类名，你通过lg: + props.width动态拼接的类名属于运行时生成，编译器无法提前解析，因此不会生成对应的CSS样式。

以下是几种可行的解决方式：

• 传递完整的断点类名
  不要只传宽度值，而是把断点前缀和宽度组合成完整的Tailwind类名再传递：

  // 父组件调用时
  <YourComponent width="w-[70%]" />
  
  // 子组件中使用
  <div className={`border-b-[1px] w-[50%] ${props.width} text-thirdMainColor ${props.margin}`}></div>
  

• 使用内联样式配合媒体查询
  如果需要更灵活的动态值，直接通过内联样式结合媒体查询实现断点宽度：

  <div 
    className="border-b-[1px] w-[50%] text-thirdMainColor"
    style={{
      margin: props.margin,
      '@media (min-width: 976px)': {
        width: props.width
      }
    }}
  ></div>
  

• 配置Tailwind扫描动态值（不推荐）
  可以在tailwind.config.js的content中添加可能的取值范围，让编译器扫描到动态生成的类，但这会增大CSS体积，仅在必要时使用：

  module.exports = {
    content: [
      './src/**/*.{js,jsx,ts,tsx}',
      // 若能明确props.width的可能取值，可添加到这里
    ],
    theme: {
      screens: {
        sm: '480px',
        md: '768px',
        lg: '976px',
        xl: '1440px',
      },
    },
  }
  

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