tailwind.config.js使用先前定义的颜色设置新的颜色变量

Question

在tailwind.config.js中，我试图在设置header的同时定义green。。。这可能吗？如果没有；还有别的办法吗？这些可以在运行时修改吗？

{
theme: {
colors: {
'green': '#36D585',
'header': theme => theme('colors.green')
}
}
}

Answer 1

假设您希望header的别名与green的颜色相同，我建议定义一个包含您的颜色的对象，然后在配置导出中引用它，因为theme函数仅在顶级主题键中可用。

// tailwind.config.js
const customColors = {
green: '#36D585',
// ...
}
module.exports = {
theme: {
colors: {
...customColors,
header: customColors.green
}
}
}

至于在运行时更改内容，您将无法动态更新Tailwind中的颜色，因为CSS是在构建时生成的。但是，您可以使用CSS自定义属性来动态更新浏览器中的内容。有关更多信息，请参阅Tailwind文档。

// tailwind.config.js
module.exports = {
theme: {
colors: {
header: 'var(--color-header)'
}
}
}

/* main.css or where your CSS is */
:root {
/* updating this value with Javascript will reactively update the colors */
--color-header: #36D585;
/* ... */
}
@tailwind base;
@tailwind components;
@tailwind utilities;