TailwindCSS:将背景颜色限制为调色板中的特定颜色
设计师们就像：
嘿，这是我们应用程序的调色板：
red，green，blue，blue-light，blue-dark
然后
但是背景色只能是这些颜色：
red**，**blue**，**blue-dark.由于可访问性要求，我们明确禁止在背景中使用blue-light。你能不能也在.你又叫什么来着？BacktyphoonCSS？
“顺风”允许您完全覆盖默认的调色板。这样，您可以确保开发人员不会使用允许的颜色以外的颜色。这是描述这里的
默认情况下，Tailwind将整个默认调色板作为背景色使用。 您可以通过编辑theme.colors文件中的>tailwind.config.js变量来自定义调色板，也可以使用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',
},
}),
},
}这是可行的，我可以将背景色设置为调色板上的颜色。但现在，我有一个问题，因为这一行从上面：
默认情况下，使整个默认调色板作为背景色可用。
因此，编写<div class="bg-blue-light">实际上是可行的，但设计人员不会在设计系统中使用蓝光作为bgcolor，所以我也希望不可能将其设置为bgcolor。如何将尾风背景颜色限制为来自调色板的特定颜色？
回答 1
Stack Overflow用户
发布于 2021-04-27 16:59:30
可以引用调色板中已经定义的颜色。您可以使用这些基色创建一个单独的"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: ...}对象，以及它引入了多少复制。
https://stackoverflow.com/questions/67287506
复制相似问题
腾讯云开发者
