Day 6 - 颜色设定

和其它 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 的颜色设定部分，咱们明天见。