다크 모드 완벽 지원

현대 웹의 핵심 트렌드, 다크 테마 이식

최신 테크 서비스의 필수 기능은 단연 눈의 피로도를 낮춰주는 다크모드입니다. Tailwind CSS는 별도의 복잡한 테마 스타일 규칙 없이, 원하는 요소 클래스명에 dark:라는 접두사 단어 한 개만 앞에 끼우면 다크 모드 활성화 시 자동으로 해당 스타일로 교체 작동하는 초간단 아키텍처를 자랑합니다.

💡 실무 지침: Class 다크모드 설정 권장

기본 OS 상태에 반응하는 미디어(media) 쿼리 방식 대신, tailwind.config.js에 darkMode: 'class' 설정을 주입하여 수동 토글 모드 아키텍처를 가져가는 것이 모범사례입니다. 이를 통해 자바스크립트로 최상위 root인 <html> 노드에 .dark 클래스만 붙였다 떼는 것으로 다크 테마를 완벽히 장악 제어할 수 있습니다.

다크모드 설정 옵션	작동 매커니즘	실무 구현 복잡성 및 장점
`media` (기본값)	사용자 OS 설정값(Windows/macOS 시스템 다크모드) 감지 후 자동 실행	따로 JS 코드를 짤 필요가 없어 극도로 단순하나, 서비스 내의 토글 스위치 단추 제어가 불가능함
`class` (권장)	최상단 html 노드에 `class="dark"`가 존재할 때 `dark:` 접두사 가동	수동 테마 변경 스위치를 구현할 수 있으며, 사용자의 최종 선택 테마를 LocalStorage에 영구 저장 가능

<!DOCTYPE html> <html lang="ko" class=""> <head> <meta charset="UTF-8"> <title>Dark Mode Dashboard</title> <script src="https://cdn.tailwindcss.com"></script> <script> tailwind.config = { darkMode: 'class' } </script> </head> <body class="bg-white text-slate-800 dark:bg-slate-900 dark:text-slate-100 min-h-screen p-8 flex items-center justify-center font-sans transition-colors duration-300"> <div class="max-w-md w-full bg-slate-100 dark:bg-slate-800 rounded-3xl p-6 border border-slate-200 dark:border-slate-700 shadow-2xl space-y-6"> <div class="flex justify-between items-center border-b border-slate-200 dark:border-slate-700 pb-4"> <h2 class="text-2xl font-black text-slate-900 dark:text-white">Workspace</h2> <button onclick="toggleDarkMode()" class="bg-indigo-600 hover:bg-indigo-500 text-white font-bold py-2 px-4 rounded-xl text-xs shadow-md transition-all"> 테마 스위칭 </button> </div> <div class="space-y-4"> <p class="text-sm text-slate-600 dark:text-slate-400"> 이 대시보드 컴포넌트는 다크 모드 기동 시 테두리 색상과 배경 카드 색상이 <code>dark:bg-slate-800</code>, <code>dark:text-white</code>로 매끄럽게 교체됩니다. </p> </div> </div> </body> </html>

다크모드 설정 옵션

작동 매커니즘

실무 구현 복잡성 및 장점

media (기본값)

사용자 OS 설정값(Windows/macOS 시스템 다크모드) 감지 후 자동 실행

따로 JS 코드를 짤 필요가 없어 극도로 단순하나, 서비스 내의 토글 스위치 단추 제어가 불가능함

class (권장)

최상단 html 노드에 class="dark"가 존재할 때 dark: 접두사 가동

수동 테마 변경 스위치를 구현할 수 있으며, 사용자의 최종 선택 테마를 LocalStorage에 영구 저장 가능