Svelte: Applying tailwind class from element prop - tailwind-css

Question

This works:
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>
Only sometimes. I can see the prop is applied to the class properly in the resulting HTML when inspecting the page source in the browser:
but the color is not applied to the underline most of the time. When I change the source HTML to a static color, save the file, and then change it back, one or both of the underlines stops working. Similarly, when I change a color in the javascript, usually the other color starts working, but not all of the time. Is this due to a race condition? Am I using Svelte wrong which might explain this seemingly random behaviour?

Answer 1

From this:
Tailwind doesn’t include any sort of client-side runtime, so class names need to be statically extractable at build-time, and can’t depend on any sort of arbitrary dynamic values that change on the client. Use inline styles for these situations, or combine Tailwind with a CSS-in-JS library like Emotion if it makes sense for your project.
What you should do:
<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>