[Tailwind CSS] 상태 기반 유틸리티 클래스(hover, focus, dark, ring, placeholder)

1. hover:

• 마우스 오버 시 스타일을 변경하는 상태 클래스

<button class="bg-gray-200 hover:bg-blue-500">Hover Me</button>

 

 

 

2. focus:

• 요소가 포커스되었을 때 스타일을 변경하는 클래스
• 주로 입력 필드나 버튼에 사용된다.

<input class="focus:outline-none focus:ring-2 focus:ring-blue-500" type="text">

 

 

 

3. dark: 

• 다크 모드일 때 적용할 스타일을 지정하는 클래스
• 테일윈드 설정 파일에서 darkMode 옵션을 활성화하여 사용할 수 있다.
  
  • ex) dark:bg-gray-800 ➡ 다크 모드에서 배경색을 어두운 회색으로 변경
• 윈도우 유저의 경우 윈도우10 기준 '설정' > '개인 설정' > '색' > '색 선택'을 '다크'로 적용하면 NextJS app에 반영된다.
  (크롬 앱 자체에서 다크 모드로 설정하는 건 적용 ❌)

<div class="bg-white dark:bg-gray-800 text-black dark:text-white">
  다크 모드에서 색상이 변경된다.
</div>

 

 

 

4. ring:

• 요소의 outline을 커스텀할 수 있는 클래스(박스 그림자를 사용하여 outline 링 생성)
• 포커스나 강조된 상태를 나타낼 때 자주 사용된다.
  
  • ex) ring-2 ring-blue-500 ➡ 파란색의 2px 두께 링 생성
  • ex) focus:ring-2 ➡ 포커스 시 링이 동적으로 생성
    

    

<input class="focus:ring-2 focus:ring-green-500 ring-offset-2 ring-offset-gray-300" type="text">

 

 

 

5. placeholder:

• 입력 필드에서 placeholder 텍스트의 스타일을 지정하는 클래스

<input class="placeholder:text-red-600" type="text" placeholder="Enter your name">

 

 

export default function Home() {
  return (
    <main className="bg-gray-100 h-screen flex items-center justify-center p-5">
      <div className="bg-white shadow-lg p-5 rounded-3xl w-full max-w-screen-sm flex flex-col gap-2">
        <input
          className="w-full rounded-full h-10 bg-gray-200 pl-5 focus:outline-none ring ring-transparent focus:ring-orange-500 focus:ring-offset-2 transition-shadow placeholder:text-red-600 placeholder:drop-shadow"
          type="text"
          placeholder="Search here..."
        />
        <button className="bg-black text-white py-2 rounded-full active:scale-90 transition-transform font-medium  outline-none">
          Search
        </button>
      </div>
    </main>
  );
}

 

---

 

Handling Hover, Focus, and Other States - Tailwind CSS

 

Dark Mode - Tailwind CSS