- 定制
- 自定义颜色
定制
自定义颜色
自定义项目的默认调色板。
Default color palette
Tailwind 包含一个精心制作的开箱即用的默认调色板，如果您还没有考虑自己的特定品牌，这是一个很好的起点。
但是，当您确实需要自定义调色板时，您可以在 tailwind.config.js 文件的 theme 部分中的 colors 键下配置颜色：
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
colors: {
// Configure your color palette here
}
}
}当谈到构建自定义调色板时，如果您确切知道自己想要什么，则可以从头开始configure your own custom colors，或者如果您想抢先一步，可以从我们广泛的包含调色板中选择curate your colors。
使用自定义颜色
如果您想用自己的自定义颜色完全替换默认调色板，请直接在配置文件的 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',
},
},
}默认情况下，这些颜色将在框架中使用颜色的任何地方可用，例如 text color 实用程序、border color 实用程序、background color 实用程序等。
<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>在 using arbitrary values 文档中了解更多信息。
生成颜色
如果您想知道我们如何自动生成每种颜色的 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 变量，则需要将这些变量定义为颜色 channels，并且希望它们与 opacity modifier syntax 一起使用：
将 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 变量的格式适合您使用的颜色函数。如果使用现代 space-separated syntax，则需要使用空格；如果使用旧函数（如 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;
}
}