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?