tailwind.config.js 파일을 통해 다크 모드 설정시 적용이 되지 않습니다.
342
작성한 질문수 8
[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', // 수동으로 설정 };답변 1
0
CDN으로 tailwind 를 설치했을 경우에는 tailwind.config 설정을 해당 파일 안에 하셔야돼요~!
tailwind.config.js 파일은 tailwind intellisense를 위한 파일입니다.
Dark Mode 설정 회차를 한번 더 보시는 것을 권장드립니다.
헤더에서 empty column이 삭제가 안되고, 헤더 레이아웃을 동영상처럼 선택하는 옵션이 안나오는데 어떻게 하나요?
0
11
1
Composition단계에서 `Layer`는 누가 만드는지
0
20
1
Strict Mode 예시 질문!
0
42
2
수업이 안보여요
0
52
1
저자 블로그에 있는 강의는 어떤 강의인가요?
1
48
1
해당 플러그인을 설치했는데 추가 지원 안될 수 있다고 다른 플러그인을 깔아보라는데 어떻게 해야하나여?
0
49
2
[해결됨]윈도우즈 환경에서 타입 스크립트 파일이 실행이 안됩니다.
1
71
5
4강 카드뉴스 자동화 자료가 안보입니다!!
0
91
2
윈도우즈 환경에서 진행중입니다.
0
51
2
4강 카드뉴스 자동화 자료
6
112
1
라이브 강의 영상 녹화본이 있을까요?
0
94
1
tailwindcss v4.1 에서의 script 사용에 대해 궁금한 점이 있습니다.
1
147
1
확장 프로그램 설치 및 최적화 버전 문의
1
151
2
tailwindcss 와 ai tool
0
120
1
tailwindcss 4.1 docs에서는 container가 목록에서 안보이네요
0
118
2
quasar와 tailwind 조합에 관한 질문
0
135
1
실습에 사용되는 이미지
0
154
2
모바일 사이즈에 대해 질문있습니다.
0
114
1
nested 리스트일때 <ul> bullet 스타일 바꾸는 방법
0
242
2
via.placeholder.com 오류
0
905
2
빈 화면에서 tail 만 쳤을때 팝업도움말 나오게 하는 법 알려주세요.
0
162
2
수강평 이벤트
0
178
2
font-weight가 왜 적용이 안될까요?
0
460
3
스니펫 관련질문
0
169
1