admin管理员组文章数量:1323518
I have a button with a PLUS svg image in it. On click, I what that Plus svg to disappear. I checked in console and the function works fine, the class "visible" is removed and the class "invisible" is added. But in the UI the Plus svg doesn't disappear. "Invisible" is a class in Tailwind that should make an item to be hidden.
const BtnAddEle = document.querySelector(".addEle");
const plusSvg = document.querySelector(".addElePlus");
BtnAddEle.addEventListener("click", function () {
plusSvg.classList.remove("visible");
plusSvg.classList.add("invisible");
});
I have a button with a PLUS svg image in it. On click, I what that Plus svg to disappear. I checked in console and the function works fine, the class "visible" is removed and the class "invisible" is added. But in the UI the Plus svg doesn't disappear. "Invisible" is a class in Tailwind that should make an item to be hidden.
const BtnAddEle = document.querySelector(".addEle");
const plusSvg = document.querySelector(".addElePlus");
BtnAddEle.addEventListener("click", function () {
plusSvg.classList.remove("visible");
plusSvg.classList.add("invisible");
});
Share
Improve this question
asked Jun 1, 2022 at 8:10
YamyyukyYamyyuky
311 silver badge3 bronze badges
2
-
1
What is your
tailwind.config.js
? Looks like you forgot to add JS files intocontent
section – Ihar Aliakseyenka Commented Jun 1, 2022 at 8:33 - 1 I also believe that was the main reason for it not working properly. Mentioning the JS file path in the content portion of tailwind.config.js file would solve this problem. – Mohammad Mustak Absar Khan Commented Oct 24, 2022 at 10:40
2 Answers
Reset to default 5The reason why it is not working for you is that-
To have tailwind classes to work from JS file you have to define the path of js file in the content portion of tailwind.config.js file.
Example:
content: ["./*.{html,js}", "./src/**/*.{html,js}"]
Using this, your tailwind piler will know that you are trying to add a css class from your JS file and that class will appear in the output css file.
Content Configuration is mentioned and explained in details - Here [Official Documentation]
This is happening because tailwind only adds class styles which you have used in the final CSS file
So you can do something like this
const BtnAddEle = document.querySelector(".addEle");
const plusSvg = document.querySelector(".addElePlus");
BtnAddEle.addEventListener("click", function () {
plusSvg.style.visibility = "hidden"
});
本文标签: Adding a class (related to tailwind) using javascript doens39t workStack Overflow
版权声明:本文标题:Adding a class (related to tailwind) using javascript doens't work - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742134417a2422306.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论