집 >웹 프론트엔드 >JS 튜토리얼 >하나의 명령으로 Tailwind CSS에서 다크 모드를 구현하는 방법

하나의 명령으로 Tailwind CSS에서 다크 모드를 구현하는 방법

DDD원래의: 2025-01-11 07:37:43891검색

How to Implement Dark Mode in Tailwind CSS in One Command

1단계: 설정 명령 실행
터미널을 열고 다음 명령을 실행하여 다크 모드 기능이 포함된 완전한 Tailwind 프로젝트를 만듭니다.

mkdir dark-mode-tailwind && cd dark-mode-tailwind && npm init -y && npm install -D tailwindcss postcss autoprefixer && npx tailwindcss init && echo '@tailwind base;\n@tailwind components;\n@tailwind utilities;' > styles.css && echo '<!DOCTYPE html>\n<html lang="en">



<p>Step 2: Open the Project<br>
After the command completes, open the folder in your code editor. Your files are ready, and you can test the project in any live server, such as:<br>
</p>

<pre class="brush:php;toolbar:false">npx live-server

명령어가 하는 일
프로젝트 폴더(dark-mode-tailwind)를 생성하고 해당 폴더로 이동합니다.
npm으로 프로젝트를 초기화하고 Tailwind CSS 종속 항목을 설치합니다.
Tailwind CSS를 구성하고 필수 styles.css 파일을 생성합니다.
다크 모드 토글 버튼이 있는 기본 index.html을 추가합니다.
localStorage를 사용하여 다크 모드 로직을 처리하기 위해 script.js 파일을 작성합니다.
즉시 사용할 수 있도록 Tailwind CSS 파일을 빌드합니다.
다크 모드 테스트
브라우저에서 index.html을 엽니다.
테마를 전환하려면 "다크 모드 전환" 버튼을 클릭하세요.
localStorage 덕분에 새로 고친 후에도 기본 설정이 유지됩니다!
코딩을 즐겨보세요! ?

위 내용은 하나의 명령으로 Tailwind CSS에서 다크 모드를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

css html npm switch for using JS

성명：

이전 기사：웹어셈블리(WASM) 소개다음 기사：웹어셈블리(WASM) 소개