tailwindcss에서 어두운 모드를 실현하는 가장 간단한 방법

다음은 제가 찾은tailwindcss에서 어둠과 광명 모드의 주제화를 실현하는 가장 빠른 방법입니다.

바람을 타고 가다.배치하다.js
이 파일에 다음 확장할 화면을 추가합니다.즉

module.exports = {
  future: {
    removeDeprecatedGapUtilities: true,
  },
  purge: ['./components/**/*.{js,ts,jsx,tsx}', './pages/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {},
      screens: {
        'light': { raw: '(prefers-color-scheme: light)' },
        'dark': { raw: '(prefers-color-scheme: dark)' }
      }
    },
  },
  variants: {
    backgroundColor: ['responsive', 'hover', 'focus', 'checked'],
  },
  plugins: [],
}

지금 우리는 유사한 일을 할 수 있다.
테스트를 진행하려면 구글 개발 도구 컨트롤러를 열고 3점 아이콘을 누르고 더 많은 도구를 누르고 렌더링을 선택하십시오.
렌더링 아래에서 아래로 스크롤하여 CSS media feature prefers 색상표를 시뮬레이션합니다.드롭다운 목록에서 [기본 색상 구성표:짙은 색]을 선택합니다.
너는 우리의 dark:bg-red-700 가 지금 효력이 발생하는 것을 보아야 한다.