Tailwind CSS에서 다크모드 구현하기

Tailwind 다크모드 구현:

// tailwind.config.js
module.exports = {
  darkMode: "class", // "media"(시스템 설정) 또는 "class"(수동 토글)
}

<!-- HTML에서 사용 -->
<div class="bg-white dark:bg-gray-900 text-black dark:text-white">
  <h1 class="text-gray-900 dark:text-gray-100">제목</h1>
  <p class="text-gray-600 dark:text-gray-400">본문</p>
</div>

// 토글 버튼 (React)
function ThemeToggle() {
  const toggle = () => {
    document.documentElement.classList.toggle("dark");
    localStorage.setItem("theme",
      document.documentElement.classList.contains("dark") ? "dark" : "light"
    );
  };
  return <button onClick={toggle}>🌙</button>;
}

dark: 접두사만 붙이면 되어서 매우 간편합니다.