상태별 스타일: hover와 focus

상태별 스타일: hover와 focus (Hover, Focus, and Other States)

Tailwind의 모든 유틸리티 클래스는 클래스 이름 맨 앞에 hover: 같은 변형(variant)을 붙여서 조건적으로 적용할 수 있어요. 이 변형이 어떤 상태일 때 스타일을 줄지를 결정하고, 조건을 만족할 때만 해당 CSS가 활성화돼요. 즉 요소의 상태에 따라 스타일을 바꾸는 일을 HTML 밖으로 나가지 않고 처리할 수 있어요.

출처: Tailwind CSS — Hover, Focus, and other states

변형으로 상태를 조건적으로 다루기

bg-sky-700 클래스를 hover 상태에서만 적용하고 싶다면 hover:bg-sky-700이라고 쓰면 돼요. 평소에는 bg-sky-500이 보이고, 마우스를 올리면 bg-sky-700으로 바뀌는 방식이에요.

<button class="bg-sky-500 hover:bg-sky-700 ...">Save changes</button>

전통적인 CSS에서는 같은 클래스 이름이 상태에 따라 다른 일을 하도록 만들었어요.

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

Tailwind에서는 hover 상태의 스타일을 기존 클래스에 덧붙이는 대신, hover 때만 동작하는 클래스를 요소에 하나 더 추가해요. hover:bg-sky-700은 기본 상태에서는 아무 일도 하지 않지만, 마우스를 올리는 순간 배경색을 sky-700으로 바꿔 주죠.

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

어떤 변형을 쓸 수 있는가

Tailwind는 거의 모든 상황을 다루는 변형을 기본 제공해요.

의사 클래스(pseudo-class): :hover, :focus, :first-child, :required
의사 요소(pseudo-element): ::before, ::after, ::placeholder, ::selection
미디어/기능 쿼리: 반응형 브레이크포인트, 다크 모드, prefers-reduced-motion
속성 선택자: [dir="rtl"], [open]
자식 선택자: & > *, & *

이 변형들은 서로 쌓아 쓸 수도 있어요. 예를 들어 "중간 브레이크포인트에서, hover 상태에서, 다크 모드일 때" 배경색을 바꾸고 싶다면 변형을 이어 붙이면 돼요.

<button class="... dark:md:hover:bg-sky-700 ...">

이렇게 변형을 조합하면 요소 하나를 고치지 않고도 복잡한 상태의 스타일을 선언적으로 표현할 수 있어요.

상태별 스타일: hover와 focus