- 自訂
- 自訂顏色
自訂
自訂顏色
自訂專案的預設顏色調色盤。
預設顏色調色盤
Tailwind 內建精心製作的預設顏色調色盤，如果你沒有特定品牌考量，這是一個很好的起點。
但當您確實需要自訂您的色票時，您可以在 tailwind.config.js 檔案的 theme 區段中的 colors 鍵下設定您的顏色
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
colors: {
// Configure your color palette here
}
}
}在建立自訂色票時，如果您確切知道您要什麼，您可以從頭開始 設定您自己的自訂顏色；如果您想要先睹為快，您可以從我們廣泛包含的色票中 策劃您的顏色。
使用自訂顏色
如果您想要完全以您自己的自訂顏色取代預設的色票，請將您的顏色直接新增到設定檔的 theme.colors 區段下
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
colors: {
transparent: 'transparent',
current: 'currentColor',
'white': '#ffffff',
'purple': '#3f3cbb',
'midnight': '#121063',
'metal': '#565584',
'tahiti': '#3ab7bf',
'silver': '#ecebff',
'bubble-gum': '#ff77e9',
'bermuda': '#78dcca',
},
},
}預設情況下，這些顏色會在您使用顏色的架構各處提供，例如 文字顏色 實用工具、邊框顏色 實用工具、背景顏色 實用工具等等。
<div class="bg-midnight text-tahiti">
<!-- ... -->
</div>如果您想要在專案中使用 transparent 和 currentColor 等值，請別忘了包含這些值。
顏色物件語法
當您的色票包含同種顏色的多種色調時，使用我們的巢狀顏色物件語法將它們分組在一起會很方便
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
colors: {
transparent: 'transparent',
current: 'currentColor',
'white': '#ffffff',
'tahiti': {
100: '#cffafe',
200: '#a5f3fc',
300: '#67e8f9',
400: '#22d3ee',
500: '#06b6d4',
600: '#0891b2',
700: '#0e7490',
800: '#155e75',
900: '#164e63',
},
// ...
},
},
}巢狀鍵會與父鍵結合，形成類別名稱，例如 bg-tahiti-400。
與 Tailwind 中的許多其他地方一樣，當您想要定義沒有後綴的值時，可以使用特殊的 DEFAULT 鍵
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
colors: {
// ...
'tahiti': {
light: '#67e8f9',
DEFAULT: '#06b6d4',
dark: '#0e7490',
},
// ...
},
},
}這將建立類別，例如 bg-tahiti、bg-tahiti-light 和 bg-tahiti-dark。
任意值
如果您在專案中需要一次性的自訂顏色，請考慮使用 Tailwind 的任意值符號，以依需求產生該顏色的類別，而非將其新增至您的主題
<button class="bg-[#1da1f2] text-white ...">
<svg><!-- ... --></svg>
Share on Twitter
</button>在 使用任意值 文件中深入了解。
產生顏色
如果您想知道我們如何自動產生每種顏色的 50–950 色階，壞消息是 — 顏色很複雜，為了獲得絕對最佳的結果，我們親自挑選了 Tailwind 的所有預設顏色，仔細地透過肉眼平衡它們，並在實際設計中測試它們，以確保我們對它們感到滿意。
如果您正在建立自己的自訂色票，但對手動建立沒有把握，UI Colors 是一個很棒的工具，可以根據任何自訂顏色提供良好的起點。
我們推薦用於建立您自己的色票的另外兩個實用工具是 Palettte 和 ColorBox — 它們不會幫您完成工作，但它們的介面設計得很適合執行這類工作。
使用預設顏色
如果您沒有為專案設定一組完全自訂的顏色，您可以透過在組態檔案中匯入 tailwindcss/colors，並選擇您要使用的顏色，從我們的預設色票中挑選您的顏色
const colors = require('tailwindcss/colors')
module.exports = {
theme: {
colors: {
transparent: 'transparent',
current: 'currentColor',
black: colors.black,
white: colors.white,
gray: colors.gray,
emerald: colors.emerald,
indigo: colors.indigo,
yellow: colors.yellow,
},
},
}如果您想要刻意限制您的色票並減少 IntelliSense 建議的類別名稱，這會很有幫助。
建立顏色名稱別名
您也可以建立我們預設色票中顏色的別名，讓名稱更簡單且容易記住
const colors = require('tailwindcss/colors')
module.exports = {
theme: {
colors: {
transparent: 'transparent',
current: 'currentColor',
black: colors.black,
white: colors.white,
gray: colors.slate,
green: colors.emerald,
purple: colors.violet,
yellow: colors.amber,
pink: colors.fuchsia,
},
},
}
這在灰色中特別常見，因為您通常只在任何特定專案中使用一組，而且很方便能夠輸入 bg-gray-300 而不是 bg-neutral-300。
新增其他顏色
如果您想在預設色盤中新增全新顏色，請在設定檔的 theme.extend.colors 區段中新增它
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
colors: {
brown: {
50: '#fdf8f6',
100: '#f2e8e5',
200: '#eaddd7',
300: '#e0cec7',
400: '#d2bab0',
500: '#bfa094',
600: '#a18072',
700: '#977669',
800: '#846358',
900: '#43302b',
},
}
},
},
}您也可以使用 theme.extend.colors 來為現有顏色新增其他色階，以符合您的設計需求
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
colors: {
blue: {
950: '#17275c',
},
}
},
},
}停用預設顏色
如果您想停用任何預設顏色，最佳方法是覆寫預設色盤，並只包含您想要的顏色
const colors = require('tailwindcss/colors')
module.exports = {
theme: {
colors: {
transparent: 'transparent',
current: 'currentColor',
black: colors.black,
white: colors.white,
gray: colors.gray,
emerald: colors.emerald,
indigo: colors.indigo,
yellow: colors.yellow,
},
},
}為您的顏色命名
預設情況下，Tailwind 使用文字顏色名稱（例如紅色、綠色等）和數字比例（其中 50 為淺色，900 為深色）。我們認為這是大多數專案的最佳選擇，並且發現它比使用抽象名稱（例如 primary 或 danger）更容易維護。
話雖如此，您可以在 Tailwind 中隨意命名您的顏色，如果您正在進行需要支援多個佈景主題的專案，那麼使用更抽象的名稱可能比較有意義
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
colors: {
primary: '#5c6ac4',
secondary: '#ecc94b',
// ...
}
}
}您可以像上面一樣明確設定這些顏色，或者您可以從我們的預設調色盤中提取顏色並建立別名
const colors = require('tailwindcss/colors')
module.exports = {
theme: {
colors: {
primary: colors.indigo,
secondary: colors.yellow,
neutral: colors.gray,
}
}
}同樣地，我們建議大多數專案都堅持使用預設命名慣例，只有在有非常好的理由時才使用抽象名稱。
使用 CSS 變數
如果您想將您的顏色定義為 CSS 變數，則需要將這些變數定義為僅顏色通道，如果您希望它們與 不透明度修改語法 一起使用
將您的 CSS 變數定義為沒有色彩空間函數的通道
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--color-primary: 255 115 179;
--color-secondary: 111 114 185;
/* ... */
}
}
不要包含色彩空間函數，否則不透明度修改器將無法使用
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--color-primary: rgb(255 115 179);
--color-secondary: rgb(111 114 185);
/* ... */
}
}
然後在您的設定檔中定義您的顏色，務必包含您正在使用的色彩空間，以及 Tailwind 在使用不透明度修改器時將用於注入 alpha 值的特殊 <alpha-value> 佔位符
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
colors: {
// Using modern `rgb`
primary: 'rgb(var(--color-primary) / <alpha-value>)',
secondary: 'rgb(var(--color-secondary) / <alpha-value>)',
// Using modern `hsl`
primary: 'hsl(var(--color-primary) / <alpha-value>)',
secondary: 'hsl(var(--color-secondary) / <alpha-value>)',
// Using legacy `rgba`
primary: 'rgba(var(--color-primary), <alpha-value>)',
secondary: 'rgba(var(--color-secondary), <alpha-value>)',
}
}
}以這種方式定義您的顏色時，請確保您的 CSS 變數格式符合您正在使用的顏色函數。如果您使用現代的 以空格分隔的語法，您會想要使用空格，如果您使用舊有的函數，例如 rgba 或 hsla，則使用逗號
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
/* For rgb(255 115 179 / <alpha-value>) */
--color-primary: 255 115 179;
/* For hsl(198deg 93% 60% / <alpha-value>) */
--color-primary: 198deg 93% 60%;
/* For rgba(255, 115, 179, <alpha-value>) */
--color-primary: 255, 115, 179;
}
}