[筆記] Tailwind css – Dark Mode 深色模式

Posted onAuthorANDY LIEN

章節連結

從 Tailwind CSS 問世以來，也經歷過了數年發展來到第 3 代。這回筆記下 tailwind css 如何呈現 dark mode。
tailwind-css

內容

1. 設定上要由 tailwind.config.js 中，用 darkMode 的鍵值新增。media 為自動轉換；class 為手動轉換
2. media 是指依據 tailwind 預設的螢幕寬度斷點，進行切換
3. document.documentElement 是指 HTML 的根元素。一般而言 dark 的關鍵字會下在這裡
4. 在 @layer 中要指定 body 背景色在深色模式下的顏色
5. 其餘的 CSS 樣式可以透過 dark:<CSS> 的語法新增

程式碼

https://github.com/andy922200/tailwindcss-3-learning/tree/dark-mode

系列文章

  • [筆記] Tailwind css 3.0 從零開始 – 架設開發環境 – 1
  • [筆記] Tailwind css – 自適應 RWD 的開發 Best Practice
  • [筆記] Tailwind css – 留言按鈕實作
  • [筆記] Tailwind css – 含 RWD 的三欄式卡片製作
  • [筆記] Tailwind css – 偽類變體和 Variants
  • [筆記] Tailwind css – 使用預設樣式和修改它
  • [筆記] Tailwind css – 使用官方定義樣式
  • [筆記] Tailwind css – Utility-First 功能優先初體驗
  • [筆記] Tailwind css – Utility Class 設定響應式
  • [筆記] Tailwind css – JIT Just-In-Time Mode 模式簡介
    • 按讚加入粉絲團

    延伸閱讀