Loading...

Tailwind CSS: Hover 가이드

KUKJIN LEE • 6개월 전 작성

기본적인 Hover 클래스 적용

Tailwind CSS에서 hover 효과를 적용하는 방법은 매우 간단합니다. 클래스 이름 앞에 hover: 접두사를 추가하면 됩니다.

<button class="bg-blue-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">
  Hover me
</button>

버튼의 기본 배경색은 bg-blue-500이고, 마우스를 올리면 bg-red-700로 변경됩니다.

텍스트 색상 변경

텍스트 색상도 마찬가지로 쉽게 변경할 수 있습니다.

<a href="#" class="text-gray-800 hover:text-red-600">
  Hover over this text
</a>

기본 상태에서 텍스트는 text-gray-800이며, 호버 시 text-red-600으로 변경됩니다.

다른 스타일 속성 변경

Tailwind CSS는 다양한 스타일 속성을 지원합니다. 예를 들어, 테두리 색상이나 그림자 효과를 변경할 수 있습니다.

<div class="border border-gray-300 hover:border-blue-500 shadow hover:shadow-lg p-4">
  Hover over this box
</div>

기본적으로 border-gray-300 테두리와 shadow를 가지며, 호버 시 border-blue-500 테두리와 더 큰 shadow-lg 그림자를 가집니다.

즉 Tailwind에서 hover 효과를 주기 위해서는 스타일 앞에 hover: 붙여주면 됩니다.