和其它 CSS 框架一樣，Tailwind 也內建顏色，但它不像 Bootstrap 就給那幾組，給的根本是調色盤，顏色由淺到深都幫咱們定義好了，雖然 Bootstrap 可以用 SCSS 的 lighten、darken 來調整，但就是要另外寫啊。沒錯～威爾豬就是懶。

基礎色

Tailwind 預設給了 8 種基本色相，分別命名為 gray、red、yellow、green、blue、indigo、purple、pink，每一種顏色又各別配置了 10 種明度，由 50、100、200、300、400、500、600、700、800、900 組成，所以 class 的寫法即為： 對象-顏色名稱-明度 (中間不要有空格)，例如要改變背景色為深灰色，即 bg-gray-900，要改變文字顏色為藍色，即 text-blue-600，要改變外框顏色為紅色，即 border-red-700，基本上前面對象的寫法和 Bootstrap 大同小異，是不是很簡單。

如果上述基本色還無法滿足你，Tailwind 還額外加了另外幾組顏色，分別為 blueGray、gray、trueGray、warmGray、orange、lime、emerald、teal、cyan、lightBlue、violet、fuchsia、rose。

這邊值得注意的是， Tailwind 預設名稱的 gray 是 colors.coolGray，和額外增加的 gray 顏色是不一樣的 (colors.gray)，顏色名稱可自定義，這稍後說明。

那如果想用官方額外增加的顏色來代替預設的顏色，該如何使用呢？沒錯，我們又要開啟設定檔 tailwind.config.js，將 tailwindcss/colors 導入到文件中，然後在 theme 中的 colors 覆蓋想改變的顏色，例如想將紅色改為 rose 的色系，就在 colors 裡寫入：red: colors.rose，以此類推，範例如下：

// tailwind.config.js

const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    ... ,
    colors: {
      red: colors.rose,
      yellow: colors.amber,
      green: colors.emerald,
    },
    ...
  },
  ...
}

沒有變更的顏色但需要用到要記得補上，不然 Tailwind 會以為你不會用到此色就刪除了。

想調用官方額外增加的配色，就必須引入 tailwindcss/colors 到文件中：const colors = require('tailwindcss/colors')。

前面的屬性依然可以自行修改成自己喜歡的名稱，官方也鼓勵這樣做，只要接手你的人看得懂這什麼顏色就好。

如果你問威爾豬說，我想要像 Bootstrap 那樣用 primary、secondary 的方式可不可以，當然沒問題啊，一樣改 colors 就好：

// tailwind.config.js

module.exports = {
  theme: {
    ... ,
    colors: {
      primary: '#5c6ac4',
      secondary: '#ecc94b',
      ...
    },
    ...
  },
  ...
}

顏色擴充

可是威爾豬，專案有使用 Tailwind 預設的顏色，但有幾個顏色沒有，總不會要全部寫過覆蓋一次吧？No No No ! 這當然要用上一篇 extend 的方法啦，需注意的是自定名稱要使用字串，且這方式就沒有 50-900 的明度囉！範例如下：

// tailwind.config.js

module.exports = {
  theme: {
    ... ,
    extend: {
      colors: {
        'myColor': '#243c5a',
        ...
      },
    },
    ...
  },
  ...
}

用法就會是：bg-myColor、text-myColor ，而且神奇的是前幾篇所安裝的 Tailwind 提示工具，馬上就出現剛寫好的擴充顏色。

那如果只是稍微想在 blue 的明度擴充一個 650 的值該怎麼寫？範例如下：

// tailwind.config.js

module.exports = {
  theme: {
    ... ,
    extend: {
      colors: {
        blue: {
          650: '#5F99F7'
        },
        ...
      },
    },
    ...
  },
  ...
}

這時 blue 就會有一個 650 的值，例如：bg-blue-650。當然你也可以擴充好幾個。

自定義色彩模組

其實，我們完全可以自定義一套屬於該專案的顏色，並且可以有主色做分類，但威爾豬還是習慣使用 extend 的擴充方式，如果名稱衝突，改名稱就好，其實不麻煩。不過可能有同學喜歡直接覆蓋的方式，簡單粗暴且霸氣，那我們來看看下面範例怎麼分類來寫：

// tailwind.config.js

module.exports = {
  theme: {
    ... ,
    colors: {
      pink: {
        light: '#ff7ce5',
        DEFAULT: '#ff49db',
        dark: '#ff16d1',
      },
      indigo: {
        light: '#b3bcf5',
        DEFAULT: '#5c6ac4',
        dark: '#202e78',
      },
      gray: {
        lightest: '#f9fafc',
        light: '#e0e6ed',
        DEFAULT: '#c0ccda',
        dark: '#3c4858',
        darkest: '#1f2d3d',
      }
    },
    ...
  },
  ...
}

這邊比較特別的是 DEFAULT 這個名稱 (注意大寫)，它代表無修飾，意思就是不用管它，直接省略就好，例如：bg-pink，千萬不要寫成 bg-pink-DEFAULT，其他名稱就照著寫就好，如：bg-indigo-light、text-gray-darkest。

以上就是今天 Tailwind 的顏色設定部分，咱們明天見。