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)'
    }
  }
}