自定义
为您的项目自定义默认调色板。
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,
},
},
}
This is especially common for grays, as you usually only use one set in any given project and
it’s nice to be able to type bg-gray-300 instead of bg-neutral-300
for example.
这对于灰色来说尤其常见，因为您通常在任何给定项目中只使用一组，并且例如能够键入 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 变量定义为不带颜色空间函数的通道
@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 值（如 rgba 等需要 alpha 通道的色彩空间）：
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
colors: {
// Using modern `rgb`
primary: 'rgb(var(--color-primary))',
secondary: 'rgb(var(--color-secondary))',
// Using modern `hsl`
primary: 'hsl(var(--color-primary))',
secondary: 'hsl(var(--color-secondary))',
// Using legacy `rgba`
primary: 'rgba(var(--color-primary), 1)',
secondary: 'rgba(var(--color-secondary), 1)',
}
}
}以这种方式定义颜色时，请确保 CSS 变量的格式对于您正在使用的颜色函数是正确的。如果使用现代空格分隔语法，则需要使用空格；如果使用 rgba 或 hsla 等旧函数，则需要使用逗号：
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
/* For rgb(255 115 179 / 1) */
--color-primary: 255 115 179;
/* For hsl(333deg 100% 73% / 1) */
--color-primary: 333deg 100% 73%;
/* For rgba(255, 115, 179, 1) */
--color-primary: 255, 115, 179;
}
}