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");
});
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"
});