Svelte：从 element prop 应用 tailwind 类

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 中的颜色时，通常另一种颜色会开始工作，但并非总是如此。这是由于竞争条件吗？我是否错误地使用了 Svelte，这可以解释这种看似随机的行为？

Answer 1

由此：​

\n

\n

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

\n

\n

你应该做什么：

\n

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

\n