Actualmente estoy en el proceso de hacer un sitio web de cartera con un modo claro y oscuro. En modo claro, las tarjetas en el sitio tienen una sombra para crear una sensación de distancia del fondo. Quiero hacer el mismo efecto en el modo oscuro, pero no sé cómo hacer una sombra blanca con viento de cola. He buscado en la documentación, otras preguntas sobre temas similares, y todavía no tuve suerte.

Puedes encontrar el código completo aquí .

Esto es lo que he intentado hasta ahora:

1. Intenté definir mi propia sombra personalizada en tailwind.config.js usando

 theme: { extend: { boxShadow: { 'dark-sm': '0 1px 2px 0 rgba(255, 255, 255, 0.05)', //White shadow blue: '0 1px 3px 0 rgba(0, 0, 255, 0.1), 0 1px 2px 0 rgba(0, 0, 255, 0.06)', //Blue shadow (for testing purposes) }, }, },

2. También intenté usar la palabra clave shadows en lugar de boxShadow:

 theme: { extend: { shadows: { 'red': 'rgba(255, 0, 0, 0.1)', //Red shadow (for testing puposes) } }, },

Por ejemplo, cuando llamo

 <div className = "dark:shadow-dark-sm">...</div>

o

 <div className = "dark:shadow-red">...</div>

no pasa nada, aunque lo pruebo con otro color y no en modo oscuro.

Hubo una vez en que pude cambiar el color usando el método boxShadow, pero ya no funciona y no tengo idea de por qué. ¡Cualquier ayuda sería apreciada!