Tailwind CSS 遇到 JavaScript 问题

Question

我用 Tailwind CSS 构建了一个 JavaScript 游戏。 一切工作正常所有文件都很好地相互连接，我已经确定了。 但是，我的一些功能仍然无法正常工作，我正在使用 classList.add 或 remove 功能。 作为#start id 连接的style.css 文件工作正常，但pressed 和gameOver 类都没有添加到JavaScript 代码中。 我也尝试改变这两个类的位置，但没有奏效。 （flash 动画不起作用。使用相同的代码在 localhost 上一切正常）

Style.css 代码 =

 @tailwind base; @tailwind components; .pressed {
background: #fff; }, .gameOver {
background-color: rgb(205, 0, 0); }, @tailwind utilities; #start {
margin-left: 6.25rem; }

JavaScript 代码 =

function animatePress(currentColor) {
document.querySelector("#" + currentColor).classList.add("pressed");
setTimeout(function () {
    document.querySelector("#" + currentColor).classList.remove("pressed");
}, 100);}

请查看完整的代码和网站。 完整代码 = Github Repo

完整网站 =西蒙游戏

请帮帮我，我是一名初级程序员，这是我的 CS50x 的最后一个项目。 谢谢。

Answer 1

当我试图检查您的问题时，tailwind 和 javascript 没有问题。

实际上，您正在为单击的元素在类列表的末尾添加.pressed类。 由于元素的.bg-green-400和默认按钮类型已经有一些常见的 css 规则作为.pressed类，它优先考虑在.pressed之前已经定义的 css 规则

因此，简单的解决方案是在.pressed类中添加!important到 css 属性，这将根据要求优先考虑 css 效果。

解决方案：

.pressed {
   background: #fff !important;
 }

.gameOver类也是如此

 .gameOver {
   background-color: rgb(205, 0, 0) !important;
 }

希望它能解决你的问题！