[TailWind] hover 사용하는 방법

tailwind에서 hover 하는 방법을 알아보자.

Next.js를 사용하면서 tailwind와 친해지는 시간이 많아졌다. hover는 어떻게 사용하는지 알아보자.

기본적인 hover 효과 적용하기

기본적으로 간단한 hover 효과는 배경색,텍스트 색상을 변경하는 것이다. 아래의 예시를 통해 알아보자.

// 기본 사용법 hover:클래스 추가
<button className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-700">호버하셈</button>

custom class 사용하기

@apply 지시어를 사용해서 CSS 파일에서 커스텀 클래스를 정의할 수 있다.

@tailwind base;
@tailwind components;
@tailwind utilities;

.btn-hover {
  @apply bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-700;
}

위와 같이 설정 후 아래와 같이 사용할 수 있다.

<button class="btn-hover">커스텀 호버 버튼임</button>

group 클래스 사용하기

group 클래스를 사용하면, 부모 요소에 hover 효과를 적용하고 자식 요소에서 group-hover 클래스를 사용해서 부모 요소가 hover될 때 요소의 스타일을 변경할 수 있다. 예시는 아래와 같다.

<div className="group p-4 border-2 border-gray-300 rounded transition-all duration-300 hover:bg-gray-100">
  <h2 className="text-gray-800 group-hover:text-blue-500">부모 요소에 마우스를 올리면 텍스트 색상이 변경</h2>  
</div>

실제 사용 예시

이번 Next.js 프로젝트를 진행하며, 리스트 아이템에 group 클래스를 사용해서 마우스 호버시 scale 처리 및 opacity를 제거하도록 적용해주었다.

• 예시 이미지

• 작성 코드

<div className="group relative w-[calc(25%-10px)] overflow-hidden max-n:w-[calc(33.333%-10px)] max-t:w-[calc(50%-10px)] max-m:w-[100%] rounded-[10px] shadow-custom">      
  <div className="champion-list-image w-full py-[30%]">
    {
      loading ? (
        <div className="loading-ui">
          <p className="bg-loading">로딩중입니다.</p>
        </div>
      ) : ("")
    }

    {champion.image && (
      <Image 
        src={`${RIOT_BASE_URL}/cdn/img/champion/splash/${champion.id}_0.jpg`} 
        className="w-full h-full transition-all duration-500 ease-in-out transform group-hover:scale-110"
        layout="fill"
        alt={champion ? champion.name : "챔피언 이미지"} 
        onLoadingComplete={handleLoadingComplete}         
      />
    )}
  </div>
  <h2 className="absolute top-[5px] right-[5px] z-20 min-w-[120px] flex items-center justify-center p-[8px] font-medium bg-black bg-opacity-70 rounded-[10px] max-t:text-[14px]">{champion.name}</h2>              
  <div className="info absolute top-0 left-0 w-full h-full z-10 bg-black bg-opacity-50 transition duration-500 ease-in-out group-hover:bg-opacity-0"></div>                  
  <Link href={`/champions/${champion.id}`} className="absolute top-0 left-0 flex w-full h-full opacity-0 z-30">{champion.name} 상세페이지로 이동</Link>
</div>

마무리

유틸리티 클래스를 활용하여 인터랙티브한 UI를 만들 수 있게 되었으며, transition 과 다른 커스텀 클래스를 추가해서 화려한 모션을 줄 수 있는 것 같다.