传递Tailwind CSS配置的背景图片Prop后不显示，求排查

1. Tailwind摇树优化剔除了动态类名 #

Tailwind默认通过静态扫描源码生成CSS，如果你通过Prop这类变量动态绑定bg-img-1，静态分析无法识别到这个类，会直接把它从最终CSS中移除，导致背景图无法加载。

解决方式：

• 在tailwind.config.js的safelist中强制保留该类：

module.exports = {
  safelist: ['bg-img-1'],
  // 其他配置项...
}

• 如果你有多个动态背景类，也可以批量添加到safelist里。

2. Prop传递与接收的大小写不匹配 #

Vue的Prop命名规则是：子组件接收用小驼峰（比如backgroundImage），父组件模板传递时需用短横线分隔的kebab-case格式。如果父组件用大驼峰BackgroundImage传递，模板解析器可能会转成全小写，导致子组件接收的Prop值异常。

检查子组件的Prop定义：

// Campsite.vue
export default {
  props: {
    backgroundImage: {
      type: String,
      required: true
    }
  }
}

父组件修正传递方式：

// Camp.vue
<Campsite :background-image="'bg-img-1'" />

3. Class绑定语法错误 #

确保子组件使用Vue的动态class绑定语法，避免用静态字符串拼接的错误写法：
正确写法：

<!-- Campsite.vue -->
<div :class="backgroundImage" class="w-full h-64"></div>

错误写法（无法生效）：

<div class="{{backgroundImage}}" class="w-full h-64"></div>

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