Creé un juego de JavaScript con Tailwind CSS. Todo funciona bastante bien, todos los archivos están bien conectados entre sí, me he asegurado de eso. Pero aún así, algunas de mis funciones no funcionan bien, en las que estoy usando la función classList.add o remove. El archivo style.css conectado como el ID de #start funciona bien, pero las clases presionadas y gameOver no se agregan al código JavaScript. También intenté cambiar las posiciones de ambas clases, pero no funcionó. (La animación flash no funciona. Todo funciona perfectamente en el host local con el mismo código)
Estilo.css código =
@tailwind base; @tailwind components; .pressed { background: #fff; }, .gameOver { background-color: rgb(205, 0, 0); }, @tailwind utilities; #start { margin-left: 6.25rem; }Código JavaScript =
function animatePress(currentColor) { document.querySelector("#" + currentColor).classList.add("pressed"); setTimeout(function () { document.querySelector("#" + currentColor).classList.remove("pressed"); }, 100);}Por favor, eche un vistazo al código completo y también al sitio web. Código completo = Github Repo
Sitio web completo = Juego Simon
Por favor, ayúdenme, soy un programador junior y este es el proyecto final de mi CS50x. Gracias.
Como traté de inspeccionar su problema, no es un problema con el viento de cola y javascript.
En realidad, está agregando la clase .pressed al final de la lista de clases para los elementos en los que se hizo clic. Dado que el .bg-green-400 del elemento y el tipo de botón predeterminado ya tienen algunas reglas CSS comunes como clase .pressed , está priorizando las reglas CSS que ya se han definido antes de .pressed
Entonces, la solución simple sería agregar !important a la propiedad css en la clase .pressed que priorizará el efecto css según el requisito.
Solución:
.pressed { background: #fff !important; }Lo mismo ocurre con la clase .gameOver
.gameOver { background-color: rgb(205, 0, 0) !important; }¡Espero que resuelva tu problema!