Adding a class (related to tailwind) using javascript doens't work - Stack Overflow

admin管理员组

文章数量:1323870

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

• javascript
• tailwind-css
• tailwind-ui
• tailwind-in-js

Share Improve this question Follow asked Jun 1, 2022 at 8:10 YamyyukyYamyyuky 3111 silver badge33 bronze badges 2

• 1 What is your tailwind.config.js? Looks like you forgot to add JS files into content 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

The 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