定制颜色
为您的项目定制默认的颜色调色板。
默认颜色调色板
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);
/* ... */
}
}然后在配置文件中定义您的颜色，确保包括您正在使用的颜色空间以及特殊的 <alpha-value> 占位符，Tailwind 将在使用不透明度修改器时用于注入 alpha 值：
/** @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;
}
}