Svelte传递字符串prop拼接类名后样式不生效问题排查

样式不生效是两个问题叠加导致的，icon路径能正常运行是因为两者的运行逻辑完全不同：图片路径是运行时拼接完成后直接交给浏览器发起资源请求，不需要构建阶段提前处理；而Tailwind类名的生成是构建阶段的静态扫描行为，运行时拼接的类名如果没被提前扫描到，根本不会存在于最终的CSS文件中，自然不会生效。

• Tailwind默认会静态扫描所有源码文件中出现的完整类名字符串，只把识别到的类的CSS规则打包到最终产物里。你写的动态拼接逻辑`bg-${bgColor}`在源码里不是完整类名，扫描器无法识别到你最终要使用bg-blue-500这个类，也就不会生成对应样式，哪怕DOM节点上确实渲染了这个类名，没有匹配的CSS规则就不会有任何视觉效果。
• 你在onMount生命周期里处理bgColor拼接的时机错误。onMount会在组件首次渲染完成、挂载到真实DOM之后才执行，也就是说组件第一次渲染时，class绑定拿到的还是原始传入的blue-500值，等onMount执行完修改bgColor才会触发二次重渲染，平白增加性能损耗。

二选一即可：

方案1：直接传入完整类名（推荐） #

去掉组件内拼接类名前缀的逻辑，调用组件时直接传入完整的Tailwind类名，保证扫描器可以直接识别到用到的类：
组件调用代码修改为：

<BigButton
  title="Join a Game"
  description="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, est?"
  icon="star"
  bgColor="bg-blue-500"
/>

同时删除onMount中处理bgColor的逻辑，class绑定直接使用传入的bgColor即可。

方案2：保留短名传参，配置Tailwind安全列表 #

如果你确实需要传入blue-500这类不带前缀的短名，就在Tailwind配置文件的safelist配置项中，把所有可能通过bgColor传入的背景类全部列出来，强制Tailwind在构建时打包这些类的样式：

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  safelist: [
    'bg-blue-500',
    'bg-red-500',
    'bg-green-500',
    'bg-slate-400'
    // 所有会动态用到的背景色类都补充在这里
  ],
  theme: {
    extend: {},
  },
  plugins: []
}

另外把类名拼接的逻辑从onMount中移出来，改用Svelte的响应式声明处理，避免首次渲染值异常的问题：

<script lang="ts">
  export let title: string;
  export let description: string = '';
  export let icon: string;
  export let bgColor: string | undefined;
  // 响应式计算属性，依赖值变化自动更新
  $: fullBgClass = bgColor ? `bg-${bgColor}` : 'bg-slate-400';
  $: iconUrl = icon ? `/icons/${icon}@2x.png` : '';
</script>

<div
  class="flex flex-row w-96 rounded-3xl p-6 justify-center place-items-center {fullBgClass}"
>

注意：动态拼接Tailwind类名是官方明确不推荐的写法，只要使用动态类，要么保证源码中存在完整的类名字符串供扫描器识别，要么提前加入safelist，否则一定会出现样式丢失的问题。

内容的提问来源于stack exchange，提问作者João Pedro