有空的話來學一下 Tailwind CSS - Week 4

yarn 1.22.10
vite 2.3.8
tailwindcss 2.2.4

--

前述

以用過 Bootstrap 客製化的我來說，Tailwind 有一個滿吸引人的地方就是他的客製化方案。
雖然 Bootstrap 上手很簡單，但在客製化方面可說是一點也不容易。

首先你必須先知道 Sass/Scss，再來還要搞定 Sass 編譯成 CSS 的環境。
最後你還要知道你想客製化的部分在 Bootstrap variables 的哪些部分(也就是你非常需要深入研讀一下 Bootstrap 的源碼)，上千行的 variables 都要知道哪些變數影響了哪些元件(component)說實話，真的不是件容易的事。

另外還有最近很流行的深色模式 (Dark mode)，目前最新的 Bootstrap 5 還沒有看到，但 Tailwind 已包含在裡面了。

實作部分

1. 客製化主題顏色 (Theme - colors)
2. 深色模式 (Dark mode)

實作

客製化主題顏色 (Theme - colors)

前三周完成後，有個不太滿意的地方就是顏色，雖然挑了與設計相近的顏色，但終究看起來就是不一樣。

而客製化方面大部分都在 tailwind.config.js 這檔案裏面就能完成；參考官方文件
Customizing Colors 的段落，修改了以下程式碼。

const colors = require('tailwindcss/colors')

module.exports = {
  ...
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      gray: colors.trueGray,
      red: colors.red,
      blue: colors.sky,
      yellow: colors.amber,
    },
    ...
  }
}

在官方調色盤 Color palette reference 中挑選，將原本偏冷色系的灰色(coolgray)，變成正常點的 真。灰色(truegray)。

而背景的靛藍色，很想換更換，Tailwind 中只要將主題顏色做拓展(extend)即可。

module.exports = {
  ...
  theme: {
    colors: {
      ...
    },
    extend: {
      colors: {
        'light-indigo': {
          50: "#efe2fa",
          100: "#e0d1f4",
          200: "#bfb1e7",
          300: "#9a93da",
          400: "#777bcd",
          500: "#5e72c0",
          600: "#4857ae",
          700: "#343d9c",
          800: "#23278a",
          900: "#181578",
        }
      }
    },
  }
}

調色盤 50-900 歸功於 Lyft Design 的 ColorBox，自製了 light-indigo 這色系。

在原本的程式碼中，只要將 xx-indigo-x00 改成 xx-light-indigo-x00 就可以了。

深色模式 (Dark mode)

在 tailwind.config.js 可直接設定 darkMode 參數，預設為 false，因為深色模式會多編譯出 dark: 開頭的 css class。
改為 media(根據系統主題設定) 或 class(根據 class 名稱改變)。

這裡我直接用 darkMode: 'media' 來實現。

在 index.html 需要改成深色模式的 class 都加上 dark:xxx 來設定。
比如，

• 左邊側欄的背景色 dark:bg-gray-700 dark:border-gray-800 dark:text-gray-50
• 主區域的任務卡片 dark:text-light-indigo-500 dark:font-semibold

... 等。

另外，可配合像 hover、focus 的 utility，如

• 左邊側欄子項目 hover dark:hover:bg-gray-600
• 主區域的任務卡片 hover dark:hover:bg-gray-600

--

完成任務卡片項目

...
<!-- Completed tasks -->
  <div class="my-[2px] p-4 h-14 rounded flex justify-between items-center bg-gray-50 hover:bg-gray-100 dark:bg-gray-700 dark:text-gray-50 dark:hover:bg-gray-600">
    <div class="flex items-center">
      <input type="checkbox" class="h-6 w-6 rounded-full text-light-indigo-500 focus:ring-0 dark:bg-gray-800 dark:border-2" checked>
      <div class="ml-4 text-sm">
        <p class="line-through">👉 選取此工作以新增提醒與到期日</p>
        <div class="flex items-center text-xs text-gray-500">
          <svg ...></svg> 
          Thu, Jun 17。
          <svg ...></svg>
        </div>
      </div>
    </div>
    <svg ...></svg>
   </div>
...

--

分享一下做深色模式遇到的小問題，直接改 Checkbox 在深色模式中，只有背景顏色能被 TailwindCSS 的 untilty dark:bg-gray-800，勾選起來的勾勾依然會是白色。

找尋一陣子在 GitHub 上找到了解法，在 style.css 中新增針對 checkbox 的 css style。

...

@layer components {
  /* https://github.com/tailwindlabs/tailwindcss-forms/issues/27#issuecomment-820958958 */
  @media (prefers-color-scheme: dark) {
    [type="checkbox"]:checked {
      background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23262626' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
    }

    [type="checkbox"] {
      @apply focus:ring-0 focus:ring-offset-0;
    }
  }
}

小結

Demo

編譯結果

生產環境編譯出來的 css 檔大約 793 行，支援深色模式只多了約 100 行 (3 kB 左右)

5/6 要求
22.0 kB/22.0 kB 已轉接
47.5 kB/47.7 kB 資源
完成:622 ms
DOMContentLoaded: 519 ms
載入:614 ms

Reference

• 07: Customizing Your Design System – Tailwind CSS: From Zero to Production
• Dark Mode – What's new in Tailwind CSS