Tarjeta.esbelta

 <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 })} >

índice.esbelto

 <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: [] };

Los colores de fondo y borde no se muestran. Sin embargo, cuando ingreso manualmente los colores, por ejemplo, "border-blue-500", los accesorios parecen funcionar para ese color específico y vuelven a no funcionar después de actualizar.

¿Cómo puedo solucionar esto?