- 定制化
- 自定义颜色
定制化
自定义颜色
为你的项目自定义默认调色板。
默认配色方案
Tailwind 提供了一个精心设计的默认配色调色板，如果你没有自己的特定品牌风格，这是一个很好的起点。
🌐 Tailwind includes an expertly-crafted default color palette out-of-the-box that is a great starting point if you don’t have your own specific branding in mind.
但是，当你确实需要自定义调色板时，可以在你的 tailwind.config.js 文件的 theme 部分的 colors 键下配置颜色：
🌐 But when you do need to customize your palette, you can configure your colors under the colors key in the theme section of your tailwind.config.js file:
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
colors: {
// Configure your color palette here
}
}
}在创建自定义调色板时，如果你知道自己确切想要的颜色，可以从头配置自己的自定义颜色；如果你想快速开始，也可以从我们提供的丰富调色板中挑选颜色。
🌐 When it comes to building a custom color palette, you can either configure your own custom colors from scratch if you know exactly what you want, or curate your colors from our extensive included color palette if you want a head start.
使用自定义颜色(Using custom colors)
如果你想用自己的自定义颜色完全替换默认的颜色调色板，请将你的颜色直接添加到配置文件的 theme.colors 部分下:
🌐 If you’d like to completely replace the default color palette with your own custom colors, add your colors directly under the theme.colors section of your configuration file:
/** @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',
},
},
}默认情况下，这些颜色将在框架中所有使用颜色的地方可用，例如 文本颜色 工具、边框颜色 工具、背景颜色 工具等。
🌐 By default, these colors will be made available everywhere in the framework where you use colors, like the text color utilities, border color utilities, background color utilities, and more.
<div class="bg-midnight text-tahiti">
<!-- ... -->
</div>如果你打算在项目中使用它们，请别忘了包含像 transparent 和 currentColor 这样的值。
🌐 Don’t forget to include values like transparent and currentColor if you want to use them in your project.
颜色对象语法(Color object syntax)
当你的调色板包含同一颜色的多种色调时，可以使用我们的嵌套颜色对象语法将它们分组，这样会更方便：
🌐 When your palette includes multiple shades of the same color, it can be convenient to group them together using our nested color object syntax:
/** @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 的类名。
🌐 The nested keys will be combined with the parent key to form class names like bg-tahiti-400.
像 Tailwind 中的许多其他地方一样，当你想定义一个没有后缀的值时，可以使用特殊的 DEFAULT 键：
🌐 Like many other places in Tailwind, the special DEFAULT key can be used when you want to define a value with no suffix:
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
colors: {
// ...
'tahiti': {
light: '#67e8f9',
DEFAULT: '#06b6d4',
dark: '#0e7490',
},
// ...
},
},
}这将创建类似 bg-tahiti、bg-tahiti-light 和 bg-tahiti-dark 的类。
🌐 This will create classes like bg-tahiti, bg-tahiti-light, and bg-tahiti-dark.
任意值(Arbitrary values)
如果你在项目中只需要一次性的自定义颜色，可以考虑使用 Tailwind 的任意值表示法按需生成该颜色的类，而不是将其添加到主题中：
🌐 If you need a one-off custom color in your project, consider using Tailwind’s arbitrary value notation to generate a class for that color on-demand instead of adding it to your theme:
<button class="bg-[#1da1f2] text-white ...">
<svg><!-- ... --></svg>
Share on Twitter
</button>在使用任意值文档中了解更多信息。
🌐 Learn more in the using arbitrary values documentation.
生成颜色(Generating colors)
如果你想知道我们是如何自动生成每种颜色的 50–950 色阶的，坏消息是——颜色很复杂，为了获得绝对最佳的效果，我们手动挑选了 Tailwind 的所有默认颜色，仔细通过肉眼进行平衡，并在实际设计中测试，以确保我们对结果满意。
🌐 If you’re wondering how we automatically generated the 50–950 shades of each color, bad news — color is complicated and to get the absolute best results we picked all of Tailwind’s default colors by hand, meticulously balancing them by eye and testing them in real designs to make sure we were happy with them.
如果你正在创建自己的自定义色彩搭配，但对手工操作没有信心，UI Colors 是一个很好的工具，可以根据任何自定义颜色为你提供一个良好的起点。
🌐 If you are creating your own custom color palette and don’t feel confident doing it by hand, UI Colors is a great tool that can give you a good starting point based on any custom color.
我们推荐的另外两个用于创建自己调色板的有用工具是 Palettte 和 ColorBox —— 它们不会替你完成工作，但它们的界面设计非常适合进行这类工作。
🌐 Two other useful tools we recommend for building your own palettes are Palettte and ColorBox — they won’t do the work for you but their interfaces are well-designed for doing this sort of work.
使用默认颜色(Using the default colors)
如果你没有为你的项目设定一套完全自定义的颜色，你可以通过在配置文件中导入 tailwindcss/colors 并选择你想要使用的颜色，从我们的默认调色板中挑选颜色：
🌐 If you don’t have a set of completely custom colors in mind for your project, you can curate your colors from our default palette by importing tailwindcss/colors in your configuration file and choosing the colors you want to use:
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 建议的类名数量，这会很有帮助。
🌐 This can be helpful if you want to deliberately limit your color palette and reduce the number of class names suggested by IntelliSense.
别名颜色名称(Aliasing color names)
你也可以为我们默认调色板中的颜色设置别名，使名称更简单且更容易记住：
🌐 You can also alias the colors in our default palette to make the names simpler and easier to remember:
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 会更方便。
🌐 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.
添加额外的颜色(Adding additional colors)
如果你想向默认调色板添加一种全新的颜色，请在配置文件的 theme.extend.colors 部分添加它：
🌐 If you’d like to add a brand new color to the default palette, add it in the theme.extend.colors section of your configuration file:
/** @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 为已有颜色添加额外的色调：
🌐 You can also use theme.extend.colors to add additional shades to an existing color if it’s needed for your design:
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
colors: {
blue: {
950: '#17275c',
},
}
},
},
}禁用默认颜色(Disabling a default color)
如果你想禁用任何默认颜色，最好的方法是覆盖默认颜色调色板，只包含你确实想要的颜色：
🌐 If you’d like to disable any of the default colors, the best approach is to override the default color palette and just include the colors you do want:
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,
},
},
}命名你的颜色(Naming your colors)
Tailwind 默认使用字面颜色名称（如红色、绿色等）和数字刻度（其中 50 是浅色，900 是深色）。我们认为这是大多数项目的最佳选择，并且发现比使用像 primary 或 danger 这样的抽象名称更容易维护。
🌐 Tailwind uses literal color names (like red, green, etc.) and a numeric scale (where 50 is light and 900 is dark) by default. We think this is the best choice for most projects, and have found it easier to maintain than using abstract names like primary or danger.
也就是说，你可以在 Tailwind 中随意命名你的颜色，如果你正在进行一个需要支持多主题的项目，例如，使用更抽象的名称可能会更合理：
🌐 That said, you can name your colors in Tailwind whatever you like, and if you’re working on a project that needs to support multiple themes for example, it might make sense to use more abstract names:
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
colors: {
primary: '#5c6ac4',
secondary: '#ecc94b',
// ...
}
}
}你可以像上面那样明确配置这些颜色，或者可以从我们的默认调色板中调用颜色并为它们创建别名：
🌐 You can configure those colors explicitly like we have above, or you can pull in colors from our default color palette and alias them:
const colors = require('tailwindcss/colors')
module.exports = {
theme: {
colors: {
primary: colors.indigo,
secondary: colors.yellow,
neutral: colors.gray,
}
}
}我们再次建议在大多数项目中坚持使用默认的命名约定，只有在有充分理由的情况下才使用抽象名称。
🌐 Again, we recommend sticking to the default naming convention for most projects, and only using abstract names if you have a really good reason.
使用 CSS 变量(Using CSS variables)
如果你想将颜色定义为 CSS 变量，你需要将这些变量仅定义为颜色通道，这样它们才能与 opacity modifier 语法 配合使用：
🌐 If you’d like to define your colors as CSS variables, you’ll need to define those variables as just the color channels if you want them to work with the 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);
/* ... */
}
}
然后在你的配置文件中定义颜色，确保包含你使用的色彩空间，以及像 rgba 这样的需要 alpha 通道的色彩空间的默认 alpha 值：
🌐 Then define your colors in your configuration file, being sure to include the color space you’re using and a default alpha value for color spaces like rgba where the alpha channel is required:
/** @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 这样的旧函数，则需要使用逗号：
🌐 When defining your colors this way, make sure that the format of your CSS variables is correct for the color function you are using. You’ll want to use spaces if using the modern space-separated syntax, and commas if using legacy functions like rgba or 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;
}
}