ホームページ >ウェブフロントエンド >jsチュートリアル >1 つのコマンドで Tailwind CSS にダーク モードを実装する方法
1 つのコマンドで Tailwind CSS にダーク モードを実装する方法
- DDDオリジナル
- 2025-01-11 07:37:43893ブラウズ
ステップ 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 を構成し、必要な style.css ファイルを作成します。
ダークモード切り替えボタンを備えた基本的なindex.htmlを追加します。
localStorage を使用してダーク モード ロジックを処理する script.js ファイルを書き込みます。
すぐに使用できるように Tailwind CSS ファイルを構築します。
ダークモードをテストしてください
ブラウザでindex.htmlを開きます。
テーマを切り替えるには、[ダークモードの切り替え] ボタンをクリックします。
localStorage のおかげで、設定は更新後も保持されます!
コーディングを楽しんでください！ ?
以上が1 つのコマンドで Tailwind CSS にダーク モードを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。