客製化色彩 (Customizing Colors)

Overview

Tailwind 包含一個開箱即用的專業設計預設調色盤，如果你不考慮自己的特定品牌，這是一個很好的起點。

但是當你需要客製化你的調色盤時，你可以在 tailwind.config.js 檔案的 theme 中的 colors 配置你的色彩：

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      // 在這裡配置你的調色盤
    }
  }
}

當涉及到建立客製化調色盤時，你可以從我們豐富的調色盤中策劃你的色彩或是透過新增特定的色彩來配置你的客製化色彩。

策劃色彩

如果你的專案沒有一套完整客製化的色彩，你可以透過引入 'tailwindcss/colors' 至你的 config 檔案並挑選你喜歡的色彩，從我們完整的調色盤中策劃你的色彩。

// tailwind.config.js
const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      black: colors.black,
      white: colors.white,
      gray: colors.trueGray,
      indigo: colors.indigo,
      red: colors.rose,
      yellow: colors.amber,
    }
  }
}

別忘了引入 transparent 和 current，如果你想在專案中可以使用的話。

雖然每個色彩都有一個特定的名稱，但我們鼓勵你在自己的專案中按照自己的喜好命名。我們甚至在預設配置也是這樣做的，將 coolGray 命名為 gray， violet 命名為 purple， amber 命名為 yellow 及 emerald 命名為 green。

請參閱我們完整調色盤參考，查看預設可供選擇的色彩

客製色彩

你可以從頭開始透過新增自己的色彩來建立一個完整客製的調色盤：

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      blue: {
        light: '#85d7ff',
        DEFAULT: '#1fb6ff',
        dark: '#009eeb',
      },
      pink: {
        light: '#ff7ce5',
        DEFAULT: '#ff49db',
        dark: '#ff16d1',
      },
      gray: {
        darkest: '#1f2d3d',
        dark: '#3c4858',
        DEFAULT: '#c0ccda',
        light: '#e0e6ed',
        lightest: '#f9fafc',
      }
    }
  }
}

預設情況下，這些色彩會被所有色彩驅動的功能自動共享，如 textColor、backgroundColor、borderColor 等。

色彩物件語法

你可以看到，上面我們使用巢狀物件符號來定義我們的色彩，其中巢狀的鍵值作為修飾符新增到基本色彩名稱中：

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      indigo: {
        light: '#b3bcf5',
        DEFAULT: '#5c6ac4',
        dark: '#202e78',
      }
    }
  }
}

色彩名稱的不同部分組合成 class 名稱，如 bg-indigo-light。

像 Tailwind 中的許多地方一樣，DEFAULT 鍵值是特殊的，意思是「無修飾符」，所以此配置會產生如 text-indigo 和 bg-indigo 的 class，而不是 text-indigo-DEFAULT 或 bg-indigo-DEFAULT。

你也可以將色彩定義為簡單的字串而不是物件：

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      'indigo-lighter': '#b3bcf5',
      'indigo': '#5c6ac4',
      'indigo-dark': '#202e78',
    }
  }
}

請注意，當使用 theme() 存取顏色時，你需要使用與定義顏色相同的符號。

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      indigo: {
        // theme('colors.indigo.light')
        light: '#b3bcf5',

        // theme('colors.indigo.DEFAULT')
        DEFAULT: '#5c6ac4',
      },

      // theme('colors.indigo-dark')
      'indigo-dark': '#202e78',
    }
  }
}

延伸預設值

正如主題文件中所述，如果你想延伸預設調色盤而不是覆蓋它，你可以使用 tailwind.config.js 檔案中的 theme.extend.colors 來實現：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'regal-blue': '#243c5a',
      }
    }
  }
}

除了所有 Tailwind 預設的色彩，這將產生像 bg-regal-blue 這樣的 class。

這些延伸是深度合併的，所以如果你想在 Tailwind 的預設色彩中新增一個額外的陰影，你可以這樣做：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        blue: {
          450: '#5F99F7'
        },
      }
    }
  }
}

這將新增像 bg-blue-450 這樣的 class，而不會失去像 bg-blue-400 或 bg-blue-500 這樣現有的 class。

停用一個預設色彩

如果你想要停用專案中沒有使用到的預設色彩，最簡單的方法是建立一個新的調色盤，並且不要包含你不打算使用的色彩。

例如，這個 tailwind.config.js 檔案不包括 teal、orange 和 pink，但包括其餘的預設色彩。

// tailwind.config.js
const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      black: colors.black,
      white: colors.white,
      gray: colors.coolGray,
      red: colors.red,
      yellow: colors.amber,
      blue: colors.blue
    }
  }
}

此外，你也可以不調整調色盤，依靠 tree-shaking 未使用的樣式來移除你不使用的色彩。

為你的色彩命名

Tailwind 使用字面的色彩名稱 (像是紅色、綠色等) 和一個預設的數字比例 (其中 50 為淺色、900 為深色)。這對大多數專案來說是相當實用的，但也有充分的理由使用其他命名規範。

例如，如果你正在做一個需要支援多種主題的專案，那麼使用像 primary 和 secondary 這樣更抽象的名稱可能是有道理的。

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

你可以像我們上面那樣明確地配置這些顏色，也可以從我們完整的調色盤中新增顏色並為它們取個別名。

// tailwind.config.js
const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    colors: {
      primary: colors.indigo,
      secondary: colors.yellow,
      neutral: colors.gray,
    }
  }
}

你甚至可以用 CSS 客製化屬性 (變數) 來定義這些顏色，以便在用戶端輕易地切換主題。

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      primary: 'var(--color-primary)',
      secondary: 'var(--color-secondary)',
      // ...
    }
  }
}

/* In your CSS */
:root {
  --color-primary: #5c6ac4;
  --color-secondary: #ecc94b;
  /* ... */
}

@tailwind base;
@tailwind components;
@tailwind utilities;

請注意，如果沒有其他的配置，使用客製化屬性的色彩將無法與色彩不透明功能一起使用，像是 bg-opacity-50。更多有關如何進行此工作的資訊，請參考此範例 repository。

產生顏色

我們常見的一個問題是「如何產生自己客製色彩的 50-900 陰影？」

壞消息是，色彩是複雜的，儘管嘗試了幾十種不同的工具，我們還沒有找到一個能很好產生這種調色盤的工具。我們手工挑選了所有 Tailwind 的預設色彩，透過肉眼仔細地平衡它們，並在實際設計中對其進行測試，以確保我們對它們感到滿意。

調色盤參考

當你把 tailwindcss/colors 引入到 tailwind.config.js 檔案中時，這是所有可以使用的色彩列表。

// tailwind.config.js
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,
    }
  }
}

雖然每種色彩都有一個特定的名稱，但我們鼓勵你在自己的專案中按照自己的喜好命名。