自定义颜色

概述

Tailwind 包含一个专业制作的开箱即用的默认调色板，如果您没有自己的特定品牌，这是一个很好的起点。

但是当您需要定制您的调色板时，您可以在您的 tailwind.config.js 文件的 theme 部分的 colors 键下配置您的颜色。

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

当涉及到建立一个自定义调色板时，您可以从我们丰富的调色板中策划您的颜色，或者通过直接添加您的特定颜色值 [配置您自己的自定义颜色] (#custom-colors)。

策划颜色

如果您没有一套完全自定义的颜色，您可以从我们完整的调色板中策划您的颜色，只需要将 'tailwindcss/colors' 导入您的配置文件中，然后选择您喜欢的颜色。

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

module.exports = {
  theme: {
    colors: {
      gray: colors.trueGray,
      indigo: colors.indigo,
      red: colors.rose,
      yellow: colors.amber,
    }
  }
}

虽然每种颜色都有一个特定的名称，但我们鼓励您在自己的项目中按照自己的喜好给它们起别名。我们甚至在默认配置中也是这样做的，给 coolGray 起别名为 gray，给 violet 起别名为 purple，给 amber 起别名为 yellow，给 emerald 起别名为 green。

请参阅我们的完整调色板参考，查看默认可供选择的颜色。

您可以添加自己的颜色值来建立一个完全自定义的调色板。

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      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',
      }
    }
  }
}

默认情况下，这些颜色会被所有颜色驱动的功能类自动共享，如 textColor、backgroundColor、borderColor 等。

颜色对象语法

您可以看到，上面我们使用嵌套对象符号来定义我们的颜色，其中嵌套键作为修饰符添加到基础颜色名称中：

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

颜色名称的不同分段组合成类名，如 bg-indigo-light。

和 Tailwind 的很多地方一样，DEFAULT 键很特殊，意思是"没有修饰符"，所以这个配置会生成 text-indigo 和 bg-indigo 这样的类，而不是 text-indigo-DEFAULT 或 bg-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',
    }
  }
}

扩展默认颜色

正如主题文档中所述，如果您想扩展默认的调色板，而不是覆盖它，您可以使用您的 tailwind.config.js 文件中的 theme.extend.colors 部分来实现。

// 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: '#000',
      white: '#fff',
      gray: colors.coolGray,
      red: colors.red,
      yellow: colors.amber,
      blue: colors.blue,
      pink: colors.pink,
    }
  }
}

另外，您也可以不动调色板，依靠 tree-shaking 未使用的样式来删除您不使用的颜色。

为您的颜色命名

Tailwind 使用字面的颜色名称(如红色，绿色等)和一个默认的数字比例(其中50为浅色，900为深色)。这对大多数项目来说是相当实用的，但也有充分的理由使用其他的命名惯例。

例如，如果您正在做一个需要支持多个主题的项目，那么使用 primary 和 secondary 这样更抽象的名称可能是有意义的。

// 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;

生成颜色

我们常见的一个问题是"如何生成自己自定义颜色的 50-900 种色调？"。

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

调色板参考

当您把 tailwindcss/colors 导入到您的 tailwind.config.js 文件中时，这是所有可用颜色的列表。

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

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

虽然每种颜色都有一个特定的名称，但我们鼓励您在自己的项目中按照自己的喜好给它们起别名。

自定义颜色

概述

策划颜色