如何在Tailwind配置中引用自定义颜色变量colorBgLight？

不行，你写的$colorBgLight是Sass/Scss的变量语法，但Tailwind的配置文件是纯JavaScript文件，根本识别不了这种写法，这么写会直接报错。

要实现颜色值复用，有两种常用的正确方式：

方式一：提前定义JS变量 #

先在配置文件外部定义好颜色变量，再在配置对象里引用：

const colorBgLight = "#fffef7";

module.exports = {
  theme: {
    extend: {
      colors: {
        // BACKGROUND COLORS
        // Light
        colorBgLight: colorBgLight,
        colorHeaderBgLight: colorBgLight,
      }
    }
  }
}

方式二：用函数创建颜色对象（适合内部复用） #

因为对象初始化时无法直接引用自身属性，所以可以用函数返回颜色对象，在函数内部先定义好基础颜色，再复用：

module.exports = {
  theme: {
    extend: {
      colors: () => {
        const baseColors = {
          colorBgLight: "#fffef7"
        };
        return {
          ...baseColors,
          colorHeaderBgLight: baseColors.colorBgLight
        };
      }
    }
  }
}

简单说就是：Tailwind配置用的是JS语法，别用预处理器那套变量写法，按JS的规则来复用值就行。

内容的提问来源于stack exchange，提问作者Kevin G