第 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。
編寫 script.js 檔案以使用 localStorage 處理暗模式邏輯。
建立 Tailwind CSS 檔案以供立即使用。
測試深色模式
在瀏覽器中開啟index.html。
點擊“切換深色模式”按鈕即可切換主題。
借助 localStorage，即使刷新後您的偏好也將持續存在！
享受編碼的樂趣！ ？
以上是如何透過一個指令在 Tailwind CSS 中實現深色模式的詳細內容。更多資訊請關注PHP中文網其他相關文章！
