参考 Tailwind Custom colors

Question

在我的顺风配置中，我扩展了自定义 colors，如下所示：

 theme: { extend: { colors: { // BACKGROUND COLORS // Light colorBgLight: "#fffef7", colorHeaderBgLight: $colorBgLight, } } }

在顺风配置中有没有一种方法可以像示例一样将 colorBgLight 引用为 colorHeaderBgLight 的变量？

Answer 1

由于 tailwind 配置文件是一个 js 文件。 您可以在其中使用任何变量。

因此，如果将变量设置为“#fffef7”，则可以在文件中的任何位置引用它。

// tailwind.config.js

let colorBgLight = "#fffef7"

theme: {
  extend: {
    colors: {
      // BACKGROUND COLORS
      // Light
      colorBgLight: colorBgLight,
      colorHeaderBgLight: colorBgLight,
    }
  }
}

Answer 2

请记住，在 Javascript 中，您可以将 styles 分配给一个变量，例如在 StyleComponents 或 vanilla Js 中

let color1 = #f3f3f3

let color2 = #b5b4b9

theme: {
    extends: {
        colors: {
            colorBgLight: color1, //<---variable1
            colorHeaderBgLight: color2,   //<---variable2
        }
    }
}