Tailwind CSS 颜色

自定义颜色

为您的项目定制默认调色盘。

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: {
      transparent: 'transparent',
      current: 'currentColor',
      black: colors.black,
      white: colors.white,
      gray: colors.trueGray,
      indigo: colors.indigo,
      red: colors.rose,
      yellow: colors.amber,
    }
  }
}

如果您希望让这些在项目中可用，请不要忘记包含 ​transparent ​和 ​current ​。(Don’t forget to include transparent and current if you’d like those available in your project.)

尽管每种颜色都有一个特定的名称，但我们鼓励您在自己的项目中随意给它们起别名。我们甚至在默认配置中执行此操作，将 ​coolGray ​别名为 ​gray​，将 ​violet ​别名为 ​purple​，将 ​amber ​别名为 ​yellow​，将 ​emerald ​别名为 ​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',
      }
    }
  }
}

默认情况下，这些颜色会被所有颜色驱动的功能类自动共享，如 ​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: colors.black,
      white: colors.white,
      gray: colors.coolGray,
      red: colors.red,
      yellow: colors.amber,
      blue: colors.blue
    }
  }
}

另外，您也可以不动调色板，依靠 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;

请注意，如果没有额外的配置，使用自定义属性定义的颜色将无法与 ​bg-opacity-50​ 等颜色不透明度实用程序一起使用。有关如何使其工作的更多信息，请参阅此示例存储库。

生成颜色

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

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

调色板参考

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

// 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.sky,
      yellow: colors.amber,
    }
  }
}

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