tailwind를 이용하여 active 유지하기

 Active시 css를 유지하고 싶었다. 즉, 클릭하면 menu가 나타나고 다시 클릭하면 menu가 사라지게 하고 싶었다.

 

<ion-icon
  name="add-outline"
  class="visible w-20 h-20 bg-white rounded-full cursor-pointer transition duration-500
  active:origin-center active:rotate-315 active:shadow-4xl active:bg-slate-800 active:text-white"
></ion-icon>

 

위와 같이 작성을 하면, Icon에 클릭을 유지하는 동안만 active css로 변하고, 클릭을 제거하면 다시 이전 css로 돌아온다. 

tailwind css만으로 active를 유지하고 싶어서, 구글링을 how to maintain active with tailwind로 했지만 찾지를 못했다.

고민하다가, 아래와 같은 방법으로 문제를 해결하였다.

좋은 방법인지는 모르겠지만, 혹시 tailwind CSS만으로 아래와 같은 기능이 구현 가능하다면 가르침 부탁드립니다.

 

useState를 이용하여 active 값을 관리하고, Icon 클릭 시 active 값을 변하게 하였다. 그리고, 삼항 연산자를 이용하여 active = true 일 때는 onMenu Css가 나타나게 하고, false 일 때는 offMenu Css가 나타나게 했다. 따라서, 클릭하면 menu가 나타나고 다시 클릭하면 menu가 사라지게 되었다.

const [active, setActive] = useState(false);
  const onMenu =
    "visible w-20 h-20 rounded-full cursor-pointer transition duration-500 origin-center rotate-315 shadow-4xl bg-slate-800 text-white";
  const offMenu =
    "visible w-20 h-20 rounded-full cursor-pointer transition duration-500 bg-white";
  const toggleActive = () => {
    if (active) {
      setActive(false);
    } else {
      setActive(true);
    }
  };
  return (
          <button onClick={() => toggleActive()}>
            <ion-icon
              name="add-outline"
              class={active ? onMenu : offMenu}
            ></ion-icon>
          </button>
 )