Svelte：从元素道具应用顺风类

Question

这行得通：

let players = [
    { id: 1, name: 'Player 1', color: 'amber' },
    { id: 2, name: 'Player 2', color: 'sky' },
];
...
<span class="underline decoration-{player.color}-500">{player.name}</span>

只是有时。在浏览器中检查页面源时，我可以看到 prop 在生成的 HTML 中正确应用于类：

但大多数时候颜色不会应用于下划线。当我将源 HTML 更改为静态颜色、保存文件，然后将其改回时，一个或两个下划线将停止工作。同样，当我在 javascript 中更改颜色时，通常 other 颜色会开始工作，但并非一直如此。这是由于比赛条件吗？我是否错误地使用了 Svelte，这可能解释了这种看似随机的行为？

Answer 1

来自this：

Tailwind 不包含任何类型的客户端运行时，因此类名需要在构建时可静态提取，并且不能依赖于在客户端更改的任何类型的任意动态值。在这些情况下使用内联样式，或者将 Tailwind 与 Emotion 等 CSS-in-JS 库结合起来（如果它对您的项目有意义）。

你应该做什么：

<script>
let players = [
    { id: 1, name: 'Player 1', className: 'decoration-amber-500' },
    { id: 2, name: 'Player 2', className: 'decoration-sky-500' },
];
</script>

<span class="underline {player.className}">{player.name}</span>

Answer 2

我认为模板字符串有错误。 这应该是正确的。

<span class={`underline decoration-${player.color}-500`}>{player.name}</span>