cari

Rumah >hujung hadapan web >tutorial js >Cara Melaksanakan Mod Gelap dalam CSS Tailwind dalam Satu Perintah

Cara Melaksanakan Mod Gelap dalam CSS Tailwind dalam Satu Perintah

DDD
DDDasal
2025-01-11 07:37:43969semak imbas

How to Implement Dark Mode in Tailwind CSS in One Command

Langkah 1: Jalankan Perintah Persediaan
Buka terminal anda dan jalankan arahan berikut untuk mencipta projek Tailwind lengkap dengan fungsi mod gelap:

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

Apa yang Dilakukan oleh Perintah
Mencipta folder projek (mode gelap-tailwind) dan menavigasi ke dalamnya.
Memulakan projek dengan npm dan memasang kebergantungan CSS Tailwind.
Mengkonfigurasikan CSS Tailwind dan mencipta fail styles.css yang diperlukan.
Menambahkan index.html asas dengan butang togol mod gelap.
Menulis fail script.js untuk mengendalikan logik mod gelap menggunakan localStorage.
Membina fail CSS Tailwind untuk kegunaan segera.
Uji Mod Gelap
Buka index.html dalam penyemak imbas.
Klik butang "Togol Mod Gelap" untuk menukar tema.
Pilihan anda akan kekal walaupun selepas dimuat semula, terima kasih kepada localStorage!
Nikmati pengekodan! ?

Atas ialah kandungan terperinci Cara Melaksanakan Mod Gelap dalam CSS Tailwind dalam Satu Perintah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css html npm switch for using JS
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Pengenalan kepada WebAssembly (WASM)Artikel seterusnya：Pengenalan kepada WebAssembly (WASM)

Artikel berkaitan

Lihat lagi