TailwindCSS：将背景颜色限制为调色板中的特定颜色答案

【问题标题】：TailwindCSS: restrict background color to specific colors from paletteTailwindCSS：将背景颜色限制为调色板中的特定颜色
【发布时间】：2021-07-21 01:24:48
【问题描述】：

设计师是这样的：

嘿，这是我们应用的调色板：red、green、blue、blue-light、blue-dark

然后

但背景颜色只能是这些颜色：red、blue、blue-dark。由于可访问性要求，我们明确禁止使用 blue-light 作为背景。你能否也请执行它......你又叫它什么？ BacktyphoonCSS?

Tailwind 允许您完全覆盖默认调色板。这样，您可以确保开发人员不会使用超出允许范围的颜色。这是here描述的：

默认情况下，Tailwind 将整个默认调色板用作背景颜色。

您可以通过编辑 >tailwind.config.js 文件中的 theme.colors 变量来自定义调色板，或者使用 Tailwind 配置的 >theme.backgroundColor 部分仅自定义背景颜色。

所以我先添加了我的调色板：

//tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
    colors: theme => ({
      red: '#ff0000',
      green: '#00ff00',
      blue: {
        light: '#0000f0',
        DEFAULT: '#0000fa',
        dark: '#0000ff',
      },
    }),
  },
}

这可行，我可以将背景颜色设置为调色板中的颜色。但是现在，由于上面的这一行，我遇到了问题：

默认情况下，Tailwind 将整个默认调色板用作背景颜色。

所以写<div class="bg-blue-light">实际上可以，但是设计师不会在设计系统中将蓝光用于bgcolor，所以我也希望它不可能设置为bgcolor。如何将 Tailwind 背景颜色限制为调色板中的某些颜色？

【问题讨论】：

标签： tailwind-css

【解决方案1】：

可以引用调色板中已经定义的颜色。您可以使用这些基色创建单独的“背景颜色”调色板。

我想出了这个：

//tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
    colors: theme => ({
      red: '#ff0000',
      green: '#00ff00',
      blue: {
        light: '#0000f0',
        DEFAULT: '#0000fa',
        dark: '#0000ff',
      },
    }),
    backgroundColor: theme => ({
      //get the value from the color definitions above (7th line from top)
      red: theme('colors.red'),
      blue: {
        DEFAULT: theme('colors.blue.DEFAULT'),
        dark: theme('colors.blue.dark'),
      }
    }),
  },
}

这有效 - <div style="bg-blue-light" /> 不再设置背景颜色。很遗憾，您需要从头开始重建 {DEFUALT: ..., light: ...} 对象以及它引入了多少重复。

【讨论】：