tailwind CSS 액티브 속성

https://tailwindcss.com/docs/hover-focus-and-other-states

variant로 조건을 표기한 뒤 css를 입력하면 바로 조건부로 스타일이 적용된다.
예를 들어 hover시 배경색 bg-sky-700은 이렇게 입력 hover:bg-sky-700 class.

전통적인 방식의 css 코드는 같은 클래스네임을 사용하는 반면,

.btn-primary {
  background-color: #0ea5e9;
}
.btn-primary:hover {
  background-color: #0369a1;
}

tailwind CSS는 디폴트 상태와 호버 상태에 다른 클래스가 적용된다.

.bg-sky-500 {
  background-color: #0ea5e9;
}
.hover\:bg-sky-700:hover {
  background-color: #0369a1;
}

---

아래 코드에서 active를 이용해

<button class="bg-violet-500 hover:bg-violet-600 focus:outline-2 focus:outline-offset-2 focus:outline-violet-500 active:bg-violet-700 ...">
  Save changes
</button>