Svelte中如何根据变量条件动态绑定Tailwind类

失效原因 #

你在三目运算符中额外套了一层{}属于语法错误。在Svelte的模板属性插值规则里，属性值最外层的{}已经标识内部是JS表达式，此时你内层再写{svgColor}等价于创建了一个键值为{svgColor: 'text-red-400'}的对象，最终渲染到class属性上的值是[object Object]，完全不是你预期的类名字符串，自然无法匹配到Tailwind样式。

正确实现方式 #

写法1：直接使用三目运算符求值 #

去掉内层多余的{}，直接在表达式中返回类名字符串即可：

<script>
    let svgColor = 'text-red-400'
    let svgVisible = true;
</script>

<p class="{svgVisible ? svgColor : ''}">Test</p>

写法2：模板字符串拼接（适合多类名场景） #

如果需要同时拼接固定类名、多个动态类名，用反引号包裹的模板字符串写法更灵活：

<!-- 同时包含固定类text-lg，以及两种状态下的不同颜色类 -->
<p class={`text-lg ${svgVisible ? svgColor : 'text-gray-400'}`}>Test</p>

写法3：预计算类名（适合复杂逻辑场景） #

如果类名判断逻辑比较复杂，建议直接在脚本中预计算好最终的class值，模板直接引用即可，可读性更高：

<script>
    let svgColor = 'text-red-400'
    let svgVisible = true;
    // $: 是Svelte的响应式声明语法，依赖变量变化时会自动更新pClass的值
    $: pClass = svgVisible ? svgColor : ''
</script>

<p class={pClass}>Test</p>

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