Tailwind CSS on GitHub

自定义颜色

自定义你的默认颜色

Overview

Tailwind包括一个专业制作的默认调色板,开箱即用,如果你没有自己的特定颜色风格,这是一个不错的选择。

Gray
colors.coolGray
50
#F9FAFB
100
#F3F4F6
200
#E5E7EB
300
#D1D5DB
400
#9CA3AF
500
#6B7280
600
#4B5563
700
#374151
800
#1F2937
900
#111827
Red
colors.red
50
#FEF2F2
100
#FEE2E2
200
#FECACA
300
#FCA5A5
400
#F87171
500
#EF4444
600
#DC2626
700
#B91C1C
800
#991B1B
900
#7F1D1D
Yellow
colors.amber
50
#FFFBEB
100
#FEF3C7
200
#FDE68A
300
#FCD34D
400
#FBBF24
500
#F59E0B
600
#D97706
700
#B45309
800
#92400E
900
#78350F
Green
colors.emerald
50
#ECFDF5
100
#D1FAE5
200
#A7F3D0
300
#6EE7B7
400
#34D399
500
#10B981
600
#059669
700
#047857
800
#065F46
900
#064E3B
Blue
colors.blue
50
#EFF6FF
100
#DBEAFE
200
#BFDBFE
300
#93C5FD
400
#60A5FA
500
#3B82F6
600
#2563EB
700
#1D4ED8
800
#1E40AF
900
#1E3A8A
Indigo
colors.indigo
50
#EEF2FF
100
#E0E7FF
200
#C7D2FE
300
#A5B4FC
400
#818CF8
500
#6366F1
600
#4F46E5
700
#4338CA
800
#3730A3
900
#312E81
Purple
colors.violet
50
#F5F3FF
100
#EDE9FE
200
#DDD6FE
300
#C4B5FD
400
#A78BFA
500
#8B5CF6
600
#7C3AED
700
#6D28D9
800
#5B21B6
900
#4C1D95
Pink
colors.pink
50
#FDF2F8
100
#FCE7F3
200
#FBCFE8
300
#F9A8D4
400
#F472B6
500
#EC4899
600
#DB2777
700
#BE185D
800
#9D174D
900
#831843

但是当你需要自定义你的调色板时,你可以在tailwind.config文件的theme部分的colors字段下配置你的颜色:

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      // Configure your color palette here
    }
  }
}

构建调色板的时候,你可以使用我们提供的调配颜色,也可以配置你自己的颜色


调配的颜色

如果你的项目中还没有清晰的自定义色系风格,你可以尝试引入我们提供的调配颜色'tailwindcss/colors',并选择你喜欢的颜色。

// tailwind.config.js
const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      black: colors.black,
      white: colors.white,
      gray: colors.trueGray,
      indigo: colors.indigo,
      red: colors.rose,
      yellow: colors.amber,
    }
  }
}

不要忘记引入transparentcurrent,如果你的项目需要的话。

Although each color has a specific name, you're encouraged to alias them however you like in your own projects. We even do this in the default configuration, aliasing coolGray to gray, violet to purple, amber to yellow, and emerald to green.

尽管每种颜色都有一个特定的名称,但鼓励你在自己的项目中随心所欲地为它们命名。

查看调色板参考查看有哪些默认颜色可供选择。


自定义颜色

你可以从头开始添加你自己的颜色值来构建一个完全自定义的调色板:

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      blue: {
        light: '#85d7ff',
        DEFAULT: '#1fb6ff',
        dark: '#009eeb',
      },
      pink: {
        light: '#ff7ce5',
        DEFAULT: '#ff49db',
        dark: '#ff16d1',
      },
      gray: {
        darkest: '#1f2d3d',
        dark: '#3c4858',
        DEFAULT: '#c0ccda',
        light: '#e0e6ed',
        lightest: '#f9fafc',
      }
    }
  }
}

默认情况下,这些颜色会被所有颜色驱动的工具类自动共享,比如textColorbackgroundColorborderColor等等。


颜色对象语法

在上面你可以看到我们嵌套了字段作为修饰符到颜色名称中。

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      indigo: {
        light: '#b3bcf5',
        DEFAULT: '#5c6ac4',
        dark: '#202e78',
      }
    }
  }
}

颜色名的不同部分组合成类名,如bg-indigo-light.

像Tailwind中的其他地方一样,DEFAULT字段是特殊的,意味着“没有修饰符”,所以这个配置将生成像text-indigobg-indigo这样的类,而不是text-indigo-DEFAULTbg-indigo-DEFAULT

你也可以直接给颜色值设置字符串,而不是一个对象:

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      'indigo-lighter': '#b3bcf5',
      'indigo': '#5c6ac4',
      'indigo-dark': '#202e78',
    }
  }
}

请注意,当使用theme()函数访问颜色时,你需要使用与定义颜色时相同的标识。

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      indigo: {
        // theme('colors.indigo.light')
        light: '#b3bcf5',

        // theme('colors.indigo.DEFAULT')
        DEFAULT: '#5c6ac4',
      },

      // theme('colors.indigo-dark')
      'indigo-dark': '#202e78',
    }
  }
}

继承默认颜色

正如主题中所描述的,如果你想扩展默认调色板而不是覆盖它,那么可以使用theme.extend:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'regal-blue': '#243c5a',
      }
    }
  }
}

这将生成像bg-regal-blue这样的类,包括所有Tailwind的默认颜色。

这些扩展被深度合并,所以如果你想添加一个额外的色值到Tailwind的某个默认颜色中,你可以这样做:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        blue: {
          450: '#5F99F7'
        },
      }
    }
  }
}

这会生成bg-blue-450,也同样会保留bg-blue-400以及bg-blue-500


禁用默认颜色

如果你想禁用一个默认颜色,因为你没有在你的项目中使用它,最简单的方法是建立一个新的调色板,去除你想禁用的颜色。

例如,这个tailwind.config.js文件中不包含teal, orange, 以及pink,但是包含了剩下的所有默认颜色:

// tailwind.config.js
const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      black: colors.black,
      white: colors.white,
      gray: colors.coolGray,
      red: colors.red,
      yellow: colors.amber,
      blue: colors.blue,
      pink: colors.pink,
    }
  }
}

或者,你可以保持调色板不变,并依赖于tree-shaking unused styles删除不使用的颜色。


命名颜色

默认情况下,Tailwind使用字面颜色名称(如red、green等)和数字刻度(50代表亮,900代表暗)。这对于大多数项目来说是相当实用的,但是也可以使用其他的命名方式。

例如,如果你正致力于一个需要支持多种主题的项目,那么使用更抽象的名称如primarysecondary可能更有意义:

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      primary: '#5c6ac4',
      secondary: '#ecc94b',
      // ...
    }
  }
}

你可以像上面那样明确地配置这些颜色,或者你可以从我们的调色板中拉入颜色并为它们重命名:

// tailwind.config.js
const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    colors: {
      primary: colors.indigo,
      secondary: colors.yellow,
      neutral: colors.gray,
    }
  }
}

你甚至可以使用CSS自定义属性(变量)来定义这些颜色,以便在客户端上轻松切换主题:

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      primary: 'var(--color-primary)',
      secondary: 'var(--color-secondary)',
      // ...
    }
  }
}
/* In your CSS */
:root {
  --color-primary: #5c6ac4;
  --color-secondary: #ecc94b;
  /* ... */
}

@tailwind base;
@tailwind components;
@tailwind utilities;

注意,如果没有额外的配置,使用自定义属性定义的颜色将不能与bg-opacity-50这样的颜色不透明度工具一起工作。有关实现此功能的更多信息,请参阅本示例掩码


生成的颜色

一个常见的问题是“我如何生成自定义颜色的50-900刻度?”

坏消息是,颜色是复杂的,尽管我们尝试了几十种不同的工具,但还没有找到一个能很好地生成这类调色板的工具。我们手工挑选了Tailwind的所有默认颜色,通过眼睛仔细地平衡它们,并在实际设计中测试它们,以确保我们对它们感到满意。


颜色参考

这些是tailwindcss/colors配置的的颜色列表。

// tailwind.config.js
const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    colors: {
      // Build your palette here
      transparent: 'transparent',
      current: 'currentColor',
      gray: colors.trueGray,
      red: colors.red,
      blue: colors.lightBlue,
      yellow: colors.amber,
    }
  }
}

尽管每种颜色都有一个特定的名称,但鼓励你在自己的项目中随心所欲地为它们命名。

Blue Gray
colors.blueGray
50
#F8FAFC
100
#F1F5F9
200
#E2E8F0
300
#CBD5E1
400
#94A3B8
500
#64748B
600
#475569
700
#334155
800
#1E293B
900
#0F172A
Cool Gray
colors.coolGray
50
#F9FAFB
100
#F3F4F6
200
#E5E7EB
300
#D1D5DB
400
#9CA3AF
500
#6B7280
600
#4B5563
700
#374151
800
#1F2937
900
#111827
Gray
colors.gray
50
#FAFAFA
100
#F4F4F5
200
#E4E4E7
300
#D4D4D8
400
#A1A1AA
500
#71717A
600
#52525B
700
#3F3F46
800
#27272A
900
#18181B
True Gray
colors.trueGray
50
#FAFAFA
100
#F5F5F5
200
#E5E5E5
300
#D4D4D4
400
#A3A3A3
500
#737373
600
#525252
700
#404040
800
#262626
900
#171717
Warm Gray
colors.warmGray
50
#FAFAF9
100
#F5F5F4
200
#E7E5E4
300
#D6D3D1
400
#A8A29E
500
#78716C
600
#57534E
700
#44403C
800
#292524
900
#1C1917
Red
colors.red
50
#FEF2F2
100
#FEE2E2
200
#FECACA
300
#FCA5A5
400
#F87171
500
#EF4444
600
#DC2626
700
#B91C1C
800
#991B1B
900
#7F1D1D
Orange
colors.orange
50
#FFF7ED
100
#FFEDD5
200
#FED7AA
300
#FDBA74
400
#FB923C
500
#F97316
600
#EA580C
700
#C2410C
800
#9A3412
900
#7C2D12
Amber
colors.amber
50
#FFFBEB
100
#FEF3C7
200
#FDE68A
300
#FCD34D
400
#FBBF24
500
#F59E0B
600
#D97706
700
#B45309
800
#92400E
900
#78350F
Yellow
colors.yellow
50
#FEFCE8
100
#FEF9C3
200
#FEF08A
300
#FDE047
400
#FACC15
500
#EAB308
600
#CA8A04
700
#A16207
800
#854D0E
900
#713F12
Lime
colors.lime
50
#F7FEE7
100
#ECFCCB
200
#D9F99D
300
#BEF264
400
#A3E635
500
#84CC16
600
#65A30D
700
#4D7C0F
800
#3F6212
900
#365314
Green
colors.green
50
#F0FDF4
100
#DCFCE7
200
#BBF7D0
300
#86EFAC
400
#4ADE80
500
#22C55E
600
#16A34A
700
#15803D
800
#166534
900
#14532D
Emerald
colors.emerald
50
#ECFDF5
100
#D1FAE5
200
#A7F3D0
300
#6EE7B7
400
#34D399
500
#10B981
600
#059669
700
#047857
800
#065F46
900
#064E3B
Teal
colors.teal
50
#F0FDFA
100
#CCFBF1
200
#99F6E4
300
#5EEAD4
400
#2DD4BF
500
#14B8A6
600
#0D9488
700
#0F766E
800
#115E59
900
#134E4A
Cyan
colors.cyan
50
#ECFEFF
100
#CFFAFE
200
#A5F3FC
300
#67E8F9
400
#22D3EE
500
#06B6D4
600
#0891B2
700
#0E7490
800
#155E75
900
#164E63
Light Blue
colors.lightBlue
50
#F0F9FF
100
#E0F2FE
200
#BAE6FD
300
#7DD3FC
400
#38BDF8
500
#0EA5E9
600
#0284C7
700
#0369A1
800
#075985
900
#0C4A6E
Blue
colors.blue
50
#EFF6FF
100
#DBEAFE
200
#BFDBFE
300
#93C5FD
400
#60A5FA
500
#3B82F6
600
#2563EB
700
#1D4ED8
800
#1E40AF
900
#1E3A8A
Indigo
colors.indigo
50
#EEF2FF
100
#E0E7FF
200
#C7D2FE
300
#A5B4FC
400
#818CF8
500
#6366F1
600
#4F46E5
700
#4338CA
800
#3730A3
900
#312E81
Violet
colors.violet
50
#F5F3FF
100
#EDE9FE
200
#DDD6FE
300
#C4B5FD
400
#A78BFA
500
#8B5CF6
600
#7C3AED
700
#6D28D9
800
#5B21B6
900
#4C1D95
Purple
colors.purple
50
#FAF5FF
100
#F3E8FF
200
#E9D5FF
300
#D8B4FE
400
#C084FC
500
#A855F7
600
#9333EA
700
#7E22CE
800
#6B21A8
900
#581C87
Fuchsia
colors.fuchsia
50
#FDF4FF
100
#FAE8FF
200
#F5D0FE
300
#F0ABFC
400
#E879F9
500
#D946EF
600
#C026D3
700
#A21CAF
800
#86198F
900
#701A75
Pink
colors.pink
50
#FDF2F8
100
#FCE7F3
200
#FBCFE8
300
#F9A8D4
400
#F472B6
500
#EC4899
600
#DB2777
700
#BE185D
800
#9D174D
900
#831843
Rose
colors.rose
50
#FFF1F2
100
#FFE4E6
200
#FECDD3
300
#FDA4AF
400
#FB7185
500
#F43F5E
600
#E11D48
700
#BE123C
800
#9F1239
900
#881337