1. 定制化
  2. 自定义颜色

默认调色板

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.

Slate
50
#f8fafc
100
#f1f5f9
200
#e2e8f0
300
#cbd5e1
400
#94a3b8
500
#64748b
600
#475569
700
#334155
800
#1e293b
900
#0f172a
950
#020617
Gray
50
#f9fafb
100
#f3f4f6
200
#e5e7eb
300
#d1d5db
400
#9ca3af
500
#6b7280
600
#4b5563
700
#374151
800
#1f2937
900
#111827
950
#030712
Zinc
50
#fafafa
100
#f4f4f5
200
#e4e4e7
300
#d4d4d8
400
#a1a1aa
500
#71717a
600
#52525b
700
#3f3f46
800
#27272a
900
#18181b
950
#09090b
Neutral
50
#fafafa
100
#f5f5f5
200
#e5e5e5
300
#d4d4d4
400
#a3a3a3
500
#737373
600
#525252
700
#404040
800
#262626
900
#171717
950
#0a0a0a
Stone
50
#fafaf9
100
#f5f5f4
200
#e7e5e4
300
#d6d3d1
400
#a8a29e
500
#78716c
600
#57534e
700
#44403c
800
#292524
900
#1c1917
950
#0c0a09
Red
50
#fef2f2
100
#fee2e2
200
#fecaca
300
#fca5a5
400
#f87171
500
#ef4444
600
#dc2626
700
#b91c1c
800
#991b1b
900
#7f1d1d
950
#450a0a
Orange
50
#fff7ed
100
#ffedd5
200
#fed7aa
300
#fdba74
400
#fb923c
500
#f97316
600
#ea580c
700
#c2410c
800
#9a3412
900
#7c2d12
950
#431407
Amber
50
#fffbeb
100
#fef3c7
200
#fde68a
300
#fcd34d
400
#fbbf24
500
#f59e0b
600
#d97706
700
#b45309
800
#92400e
900
#78350f
950
#451a03
Yellow
50
#fefce8
100
#fef9c3
200
#fef08a
300
#fde047
400
#facc15
500
#eab308
600
#ca8a04
700
#a16207
800
#854d0e
900
#713f12
950
#422006
Lime
50
#f7fee7
100
#ecfccb
200
#d9f99d
300
#bef264
400
#a3e635
500
#84cc16
600
#65a30d
700
#4d7c0f
800
#3f6212
900
#365314
950
#1a2e05
Green
50
#f0fdf4
100
#dcfce7
200
#bbf7d0
300
#86efac
400
#4ade80
500
#22c55e
600
#16a34a
700
#15803d
800
#166534
900
#14532d
950
#052e16
Emerald
50
#ecfdf5
100
#d1fae5
200
#a7f3d0
300
#6ee7b7
400
#34d399
500
#10b981
600
#059669
700
#047857
800
#065f46
900
#064e3b
950
#022c22
Teal
50
#f0fdfa
100
#ccfbf1
200
#99f6e4
300
#5eead4
400
#2dd4bf
500
#14b8a6
600
#0d9488
700
#0f766e
800
#115e59
900
#134e4a
950
#042f2e
Cyan
50
#ecfeff
100
#cffafe
200
#a5f3fc
300
#67e8f9
400
#22d3ee
500
#06b6d4
600
#0891b2
700
#0e7490
800
#155e75
900
#164e63
950
#083344
Sky
50
#f0f9ff
100
#e0f2fe
200
#bae6fd
300
#7dd3fc
400
#38bdf8
500
#0ea5e9
600
#0284c7
700
#0369a1
800
#075985
900
#0c4a6e
950
#082f49
Blue
50
#eff6ff
100
#dbeafe
200
#bfdbfe
300
#93c5fd
400
#60a5fa
500
#3b82f6
600
#2563eb
700
#1d4ed8
800
#1e40af
900
#1e3a8a
950
#172554
Indigo
50
#eef2ff
100
#e0e7ff
200
#c7d2fe
300
#a5b4fc
400
#818cf8
500
#6366f1
600
#4f46e5
700
#4338ca
800
#3730a3
900
#312e81
950
#1e1b4b
Violet
50
#f5f3ff
100
#ede9fe
200
#ddd6fe
300
#c4b5fd
400
#a78bfa
500
#8b5cf6
600
#7c3aed
700
#6d28d9
800
#5b21b6
900
#4c1d95
950
#2e1065
Purple
50
#faf5ff
100
#f3e8ff
200
#e9d5ff
300
#d8b4fe
400
#c084fc
500
#a855f7
600
#9333ea
700
#7e22ce
800
#6b21a8
900
#581c87
950
#3b0764
Fuchsia
50
#fdf4ff
100
#fae8ff
200
#f5d0fe
300
#f0abfc
400
#e879f9
500
#d946ef
600
#c026d3
700
#a21caf
800
#86198f
900
#701a75
950
#4a044e
Pink
50
#fdf2f8
100
#fce7f3
200
#fbcfe8
300
#f9a8d4
400
#f472b6
500
#ec4899
600
#db2777
700
#be185d
800
#9d174d
900
#831843
950
#500724
Rose
50
#fff1f2
100
#ffe4e6
200
#fecdd3
300
#fda4af
400
#fb7185
500
#f43f5e
600
#e11d48
700
#be123c
800
#9f1239
900
#881337
950
#4c0519

但是当你确实需要自定义你的调色板时,你可以在 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:

tailwind.config.js
/** @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:

tailwind.config.js
/** @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>

如果你想在项目中使用它们,请不要忘记包含 transparentcurrentColor 等值。

¥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:

tailwind.config.js
/** @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:

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    colors: {
      // ...
      'tahiti': {
        light: '#67e8f9',
        DEFAULT: '#06b6d4',
        dark: '#0e7490',
      },
      // ...
    },
  },
}

这将创建像 bg-tahitibg-tahiti-lightbg-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.

如果你正在创建自己的自定义调色板并且对手动操作没有信心,那么 用户界面颜色 是一个很棒的工具,它可以为你提供基于任何自定义颜色的良好起点。

¥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.

我们推荐用于构建你自己的调色板的另外两个有用工具是 调色板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:

tailwind.config.js
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:

tailwind.config.js
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:

tailwind.config.js
/** @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:

tailwind.config.js
/** @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:

tailwind.config.js
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 为深色)。我们认为这是大多数项目的最佳选择,并且发现它比使用像 primarydanger 这样的抽象名称更容易维护。

¥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:

tailwind.config.js
/** @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:

tailwind.config.js
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 变量,并且希望它们与 透明度修饰符语法 一起使用,则需要将这些变量定义为颜色通道:

¥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 变量定义为不带颜色空间函数的通道

main.css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --color-primary: 255 115 179;
    --color-secondary: 111 114 185;
    /* ... */
  }
}

请勿包含色彩空间函数,否则透明度修饰符将不起作用

main.css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --color-primary: rgb(255 115 179);
    --color-secondary: rgb(111 114 185);
    /* ... */
  }
}

然后在配置文件中定义颜色,确保包含你正在使用的颜色空间和需要 alpha 通道的颜色空间(如 rgba)的默认 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:

tailwind.config.js
/** @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 变量的格式对于你使用的颜色函数是正确的。如果使用现代 空格分隔语法,则需要使用空格;如果使用 rgbahsla 等传统函数,则需要使用逗号:

¥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:

main.css
@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;
  }
}