tailwind.config.js 파일을 통해 다크 모드 설정시 ... - 인프런

[tailwind.config.js]

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{html,js}'],
  darkMode: 'selector',
};

[practice-test.html]

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tailwind CSS</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="bg-white dark:bg-gray-900 dark:text-white">
    <main
      class="container max-w-5xl mx-auto min-h-screen flex items-center justify-center"
    >
      <div class="flex flex-col items-center">
        <h1 class="font-extrabold text-3xl">Tailwind CSS 다크모드</h1>
        <p class="mt-4">이 페이지는 다크 모드를 지원합니다.</p>
        <button
          id="darkmode_btn"
          class="bg-blue-500 px-4 py-2 rounded-md text-white mt-4"
        >
          다크 모드 전환
        </button>

        <div
          class="px-10 py-6 bg-white rounded-md shadow-md mt-20 dark:bg-gray-800"
        >
          <p>이 박스는 다크 모드에서 배경이 어두운 색으로 변합니다.</p>
        </div>
      </div>
    </main>

    <script>
      document.querySelector('#darkmode_btn').addEventListener('click', () => {
        document.documentElement.classList.toggle('dark');
      });
    </script>
  </body>
</html>

tailwind.config.js 의 경로는 아래 스크린샷으로 첨부하였습니다.

제가 무슨 설정을 빠트린건지 명확히는 모르겠는데 <head> 태그 내부에 <script> 태그로 아래와 같이 설정하면 버튼을 클릭했을 때 다크모드와 원래 상태로 정상적으로 토글이 되는데 tailwind.config.js 로 설정만 하면 토글이 안되네요 모든 페이지에 다크모드를 설정하기 위해서는 tailwind.config.js 를 통해서 다크 모드 활성화를 하는 것이 좋을 것 같아서 질문 남깁니다! 좋은 강의 감사드립니다.

tailwind.config = { // darkMode: 'media', // 운영 체제의 모드에 맞게 설정 darkMode: 'selector', // 수동으로 설정 };

인프런 커뮤니티 질문&답변

tailwind.config.js 파일을 통해 다크 모드 설정시 적용이 되지 않습니다.