如何解决tailwind.config.js 使用先前定义的颜色设置新颜色变量
在 tailwind.config.js
中,我试图在设置 green
的同时定义 header
...这可能吗?如果不;还有另一种方法吗?这些可以在运行时修改吗?
{
theme: {
colors: {
'green': '#36D585','header': theme => theme('colors.green')
}
}
}
解决方法
假设您希望 header
的别名与 green
的颜色相同,我建议定义一个包含您的颜色的对象,然后在您的配置导出中引用它,因为 {{1} } 函数仅在 top-level theme keys 中可用。
theme
至于在运行时更改内容,您将无法在 Tailwind 中动态更新颜色,因为 CSS 是在构建时生成的。但是,您可以使用 CSS custom properties 动态更新浏览器中的内容。有关详细信息,请参阅 Tailwind docs。
// tailwind.config.js
const customColors = {
green: '#36D585',// ...
}
module.exports = {
theme: {
colors: {
...customColors,header: customColors.green
}
}
}
// tailwind.config.js
module.exports = {
theme: {
colors: {
header: 'var(--color-header)'
}
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。