I built a JavaScript game with tailwind CSS. Everything is working pretty fine all the files are well connected to each other, I've made sure that. But still, some of my functions are not working well, in which I am using classList.add or remove function. The style.css file connected as the #start id is working fine but both the pressed and gameOver classes are not getting added to the JavaScript code. I've tried to change the positions of both the classes as well but it didn't work. (The flash animation is not working. Everything is working perfectly on the localhost with the same code)
Style.css code =
@tailwind base; @tailwind components; .pressed {
background: #fff; }, .gameOver {
background-color: rgb(205, 0, 0); }, @tailwind utilities; #start {
margin-left: 6.25rem; }
JavaScript Code =
function animatePress(currentColor) {
document.querySelector("#" + currentColor).classList.add("pressed");
setTimeout(function () {
document.querySelector("#" + currentColor).classList.remove("pressed");
}, 100);}
Pls take a look at the full code and also the website. Full code = Github Repo
Full Website = Simon Game
Pls help me out, I'm a junior coder and this is my CS50x's final project. Thanks.
As I tried to inspect your problem, It's not problem with tailwind and javascript.
Actually you're adding .pressed class at the end of the classlist for clicked elements. Since the element's .bg-green-400 and default button type already have some common css rules as .pressed class, it's prioritizing the css rules which have already defined before .pressed
So, the simple solution would be for this adding !important to css property in .pressed class which will prioritize the css effect as per requirement.
Solution:
.pressed {
background: #fff !important;
}
Same goes for .gameOver class
.gameOver {
background-color: rgb(205, 0, 0) !important;
}
Hope it solves your problem!