Tailwind CSS 遇到 JavaScript 的问题

Question

我用 tailwind CSS 构建了一个 JavaScript 游戏。一切都很好，所有文件都相互连接良好，我已经确定了。但是，我的某些功能仍然无法正常工作，其中我正在使用 classList.add 或删除功能。作为 #start id 连接的 style.css 文件工作正常，但按下和 gameOver 类都没有添加到 JavaScript 代码中。我也尝试更改类的位置，但没有成功。（Flash 动画不工作。使用相同的代码在本地主机上一切正常）

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

完整网站 = Simon Game

请帮助我，我是初级编码员，这是我的 CS50x 的最终项目。谢谢。

Answer 1

当我试图检查你的问题时，这不是 tailwind 和 javascript 的问题。

实际上，您是在 class 列表的末尾添加 .pressed class 用于单击的元素。由于元素的 .bg-green-400 和默认按钮类型已经有一些通用的 css 规则，如 .pressed class，它优先考虑在 .pressed

之前定义的 css 规则

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

解决方案：

.pressed {
   background: #fff !important;
 }

.gameOver class

也一样

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

希望它能解决您的问题！

Tailwind CSS 遇到 JavaScript 的问题

Tailwind CSS having trouble with JavaScript

javascript

css

tailwind-css

tailwind-in-js