- 自定义
- 自定义颜色
自定义
自定义颜色
自定义项目默认颜色调色板。
默认颜色调色板
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;
}
}