I have this BigButton component where I want to pass a bgColor prop :
<BigButton
title="Join a Game"
description="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, est?"
icon="star"
bgColor="blue-500"
/>
then on the component I handle it in the onMount hook:
<script lang="ts">
import { onMount } from 'svelte';
export let title: string;
export let description: string = '';
export let icon: string;
export let bgColor: string | undefined;
let iconUrl: string;
onMount(() => {
if (icon) iconUrl = `/icons/${icon}@2x.png`;
if (bgColor) bgColor = `bg-${bgColor}`;
});
</script>
<div
class="flex flex-row w-96 rounded-3xl p-6
justify-center place-items-center {bgColor ? bgColor : 'bg-slate-400'}"
>
the component renders with the class name but the style is not applied.
I did something similar with the icon prop, which does work:
<img src={iconUrl} alt="gold star" />
You are using Tailwind, this relies heavily on post-processing of the code. My guess would be that if you do not include the full class name, the corresponding CSS will not be included in the output, because including every possible Tailwind class would create a massive file.
If you know what classes will be possible, you can also try to force the inclusion of those styles.