테일윈드(TailwindCSS)에서 다크모드 비활성화하기

TailwindCSS에서 다크 모드를 완전히 비활성화하는 것은 간단합니다. 기본적으로 tailwind.config.js에서 다크 모드와 관련된 구성을 설정하지 않으면 다크 모드 변형이 활성화되지 않습니다. 그러나 기존 구성이 있거나 명시적으로 다크 모드를 비활성화하고 싶다면 Tailwind 구성 파일을 수정할 수 있습니다.

TailwindCSS에서 다크 모드 비활성화 방법

tailwind.config.js 수정

다크 모드를 비활성화하려면, darkMode 옵션이 설정되지 않았거나 명시적으로 false로 설정되었는지 확인하세요. 이는 Tailwind CSS가 다크 모드 변형을 생성하지 않도록 합니다. 별도의 클래스르 다크모드를 구현한 스타일링 코드가 있다면 해당 부분은 직접 제거해야 합니다.

// tailwind.config.js
module.exports = {
  darkMode: 'selector', // 3.4 이전 버전에서는 'class' 사용
  // 'media'(미디어)가 아니라 선택자에 의해 값을 지정하도록 함
  theme: {
    extend: {},
  },
  plugins: [],
}

추가 고려사항

• 사용하지 않는 CSS 제거: 이전에 다크 모드를 활성화했던 경우 비활성화하면 사용하지 않는 스타일에 대한 CSS 감사를 수행하는 좋은 기회입니다. TailwindCSS의 PurgeCSS(지금은 Tailwind의 JIT 모드의 일부로 통합됨)를 올바르게 구성하면 사용하지 않는 스타일을 자동으로 제거할 수 있습니다.
• 문서 업데이트: 팀에서 작업하거나 프로젝트가 다른 사람에 의해 유지될 경우, 다크 모드 지원 제거를 반영하여 문서를 업데이트하는 것이 향후 개발 노력을 조정하는 데 도움이 됩니다.

자료 링크

• 테일윈드 다크모드 활용법 문서