Question

设计师是这样的：

<块引用>

嘿，这是我们应用的调色板：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 背景颜色限制为调色板中的某些颜色？

Answer 1

可以参考调色板中已经定义的颜色。您可以使用这些基色创建一个单独的“backgroundColors”调色板。

我想出了这个：

//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: ...} 对象以及它引入了多少重复。

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

1 个答案: