Tailwind CSS: Hover 가이드

기본적인 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>