Card.svelte

<script lang="ts">
  export let active;
  export let color;
</script>

<div
    class={classnames(`w-80 border-4 rounded-lg p-6 border-${color}-500`, {
        [`bg-${color}-500`]: active
    })}
>

index.svelte

<div>
  <Card color="blue" active/>
  <Card color="pink" />
</div>

postcss.config.cjs

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

tailwind.config.js

module.exports = {
    content: ['./src/**/*.{html,js,svelte,ts}'],
    theme: {
        extend: {
            fontFamily: {
                oswald: ['Oswald']
            }
        }
    },
    plugins: []
};

The background and border colors are not showing up. However, when I manually enter the colors e.g "border-blue-500", the props seem to work for that specific color and goes back to not working after I refresh.

How do I fix this?