Schritt 1: Führen Sie den Setup-Befehl aus
Öffnen Sie Ihr Terminal und führen Sie den folgenden Befehl aus, um ein vollständiges Tailwind-Projekt mit Dunkelmodus-Funktionalität zu erstellen:
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
Was der Befehl bewirkt
Erstellt einen Projektordner (dark-mode-tailwind) und navigiert darin.
Initialisiert das Projekt mit npm und installiert Tailwind-CSS-Abhängigkeiten.
Konfiguriert Tailwind CSS und erstellt die erforderliche Datei „styles.css“.
Fügt eine einfache index.html mit einer Schaltfläche zum Umschalten des dunklen Modus hinzu.
Schreibt eine script.js-Datei, um die Dunkelmoduslogik mithilfe von localStorage zu verarbeiten.
Erstellt die Tailwind-CSS-Datei zur sofortigen Verwendung.
Testen Sie den Dunkelmodus
Öffnen Sie index.html in einem Browser.
Klicken Sie auf die Schaltfläche „Dunkelmodus umschalten“, um das Thema zu wechseln.
Ihre Präferenz bleibt dank localStorage auch nach der Aktualisierung bestehen!
Viel Spaß beim Codieren! ?
Das obige ist der detaillierte Inhalt vonSo implementieren Sie den Dunkelmodus in Tailwind CSS in einem Befehl. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
