為你的專案自訂預設的調色盤。
Tailwind 包含一個開箱即用的專業設計預設調色盤,如果你不考慮自己的特定品牌,這是一個很好的起點。
colors.coolGray
colors.red
colors.amber
colors.emerald
colors.blue
colors.indigo
colors.violet
colors.pink
但是當你需要客製化你的調色盤時,你可以在 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,
}
}
}
雖然每種色彩都有一個特定的名稱,但我們鼓勵你在自己的專案中按照自己的喜好命名。
colors.blueGray
colors.coolGray
colors.gray
colors.trueGray
colors.warmGray
colors.red
colors.orange
colors.amber
colors.yellow
colors.lime
colors.green
colors.emerald
colors.teal
colors.cyan
colors.sky
colors.blue
colors.indigo
colors.violet
colors.purple
colors.fuchsia
colors.pink
colors.rose