communauté
Apprendre
Bibliothèque d'outils
Outils d'IA
Loisirs
recherche
Français
Maison > interface Web > js tutoriel > Comment implémenter le mode sombre dans Tailwind CSS en une seule commande

Comment implémenter le mode sombre dans Tailwind CSS en une seule commande

DDD
Libérer： 2025-01-11 07:37:43
original
891 Les gens l'ont consulté

How to Implement Dark Mode in Tailwind CSS in One Command

Étape 1 : Exécutez la commande de configuration
Ouvrez votre terminal et exécutez la commande suivante pour créer un projet Tailwind complet avec la fonctionnalité de mode sombre :

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
Copier après la connexion

Ce que fait la commande
Crée un dossier de projet (dark-mode-tailwind) et y navigue.
Initialise le projet avec npm et installe les dépendances CSS Tailwind.
Configure Tailwind CSS et crée le fichier styles.css requis.
Ajoute un index.html de base avec un bouton bascule en mode sombre.
Écrit un fichier script.js pour gérer la logique du mode sombre à l'aide de localStorage.
Construit le fichier CSS Tailwind pour une utilisation immédiate.
Testez le mode sombre
Ouvrez index.html dans un navigateur.
Cliquez sur le bouton « Activer le mode sombre » pour changer de thème.
Votre préférence persistera même après actualisation, grâce à localStorage !
Profitez du codage ! ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source：dev.to
Article précédent：Introduction à WebAssembly (WASM) Article suivant：Le site Web SourceCodeDocs a été créé
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...
Depuis 2024-04-29 11:01:01
0
3
2441
Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?
Depuis 2024-04-23 00:22:19
0
11
2573
La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...
Depuis 2024-04-19 15:37:47
0
1
2176
Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...
Depuis 2024-04-18 23:52:34
0
1
2054
Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel
Depuis 2024-04-16 10:10:18
0
0
2157
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal