2025.1.31 금요일의 공부기록
Tailwind CSS에서는 모디파이어(Modifiers)를 사용하여 마우스 오버, 포커스, 다크 모드 등 다양한 상태에서 스타일을 지정할 수 있다.
이를 활용하면 별도의 CSS 파일 없이 동적인 UI를 손쉽게 구현할 수 있다.
상태 기반 스타일 적용 (Hover, Focus 등)
Tailwind CSS는 상태를 나타내는 유틸리티 접두어(Prefix)를 제공하여, 특정 이벤트가 발생했을 때 스타일을 변경할 수 있다.
📌 기본 구조
<p class="상태-modifier:기본-class">텍스트</p>hover:bg-blue-500→ 마우스를 올리면 배경색이blue-500으로 변경됨.focus:ring-2→ 포커스될 때ring효과가 적용됨.
📌 지원하는 상태 Modifiers
| Modifier | 설명 |
|---|---|
hover: | 요소에 마우스를 올렸을 때 적용 |
focus: | 요소가 포커스를 받았을 때 적용 |
active: | 클릭한 상태(마우스를 누른 상태)에서 적용 |
disabled: | 비활성화된 요소에 적용 |
visited: | 방문한 링크에 적용 |
checked: | 체크된 상태(라디오, 체크박스)에서 적용 |
| 등등... | 등등... |
✅ 예제 1: Hover & Focus 스타일 적용
<button class="bg-blue-500 text-white px-4 py-2 rounded-md
hover:bg-blue-700 focus:ring-2 focus:ring-blue-400">
버튼
</button>📌 설명:
- 기본 상태:
bg-blue-500(파란 배경) - 마우스를 올리면
hover:bg-blue-700(더 진한 파란색) - 포커스되면
focus:ring-2 focus:ring-blue-400(파란색 테두리 강조)
✅ 예제 2: Active 상태 (클릭 시 스타일 변경)
<button class="bg-green-500 text-white px-4 py-2 rounded-md
active:bg-green-700">
클릭해 보세요
</button>📌 설명:
- 기본 상태:
bg-green-500 - 클릭한 순간(
active:) 배경이bg-green-700으로 변경됨.
✅ 예제 3: Disabled 상태 (비활성화)
<button class="bg-gray-400 text-white px-4 py-2 rounded-md
disabled:opacity-50 disabled:cursor-not-allowed" disabled>
비활성화 버튼
</button>📌 설명:
opacity-50→ 버튼이 흐려짐.cursor-not-allowed→ 커서를🚫모양으로 변경.
✅ 예제 4: Checked 상태 (체크박스)
<input type="checkbox" class="checked:bg-blue-500" />📌 설명:
- 체크박스를 체크하면
bg-blue-500배경색이 적용됨.
다크 모드 적용하기
Tailwind CSS에서는 다크 모드(Dark Mode)를 쉽게 활성화할 수 있다.
📌 다크 모드 활성화 방법
tailwind.config.js에서 darkMode 옵션을 "class"로 설정하면, dark: 접두어를 사용하여 다크 모드 스타일을 적용할 수 있다.
// tailwind.config.js
module.exports = {
darkMode: "class", // 다크 모드를 클래스 기반으로 설정
theme: {
extend: {},
},
plugins: [],
};✅ 예제 1: 다크 모드에서 배경 및 텍스트 변경
<div class="bg-white text-black dark:bg-gray-900 dark:text-white p-4">
다크 모드 지원 텍스트
</div>📌 설명:
- 기본 상태:
bg-white text-black(밝은 배경, 검은 텍스트) - 다크 모드(
dark:)에서는bg-gray-900 text-white(어두운 배경, 흰 텍스트)
✅ 예제 2: 다크 모드 버튼 스타일 적용
<button class="bg-gray-300 text-black px-4 py-2 rounded-md
dark:bg-gray-700 dark:text-white">
다크 모드 버튼
</button>📌 설명:
- 일반 모드:
bg-gray-300 text-black - 다크 모드(
dark:):bg-gray-700 text-white
✅ 예제 3: 다크 모드 전환 버튼 (JavaScript 활용)
<button onclick="document.documentElement.classList.toggle('dark')"
class="px-4 py-2 bg-gray-500 text-white rounded-md">
다크 모드 토글
</button>📌 설명:
- 버튼을 클릭하면
document.documentElement.classList.toggle('dark')가 실행되어 다크 모드가 활성화된다. darkMode: "class"로 설정했기 때문에,dark클래스가html요소에 추가되면 다크 모드 스타일이 적용된다.
Tailwind CSS의 상태 모디파이어를 활용하면, 별도의 CSS 없이도 다양한 UI 인터랙션을 간편하게 추가할 수 있다!
자세한 내용은 Tailwind 공식 문서를 참고하자.
