Tailwind CSS：如何在配置文件中引用主题内的其他值？

要在tailwind.config.js内实现核心颜色与衍生颜色的交叉引用，同时支持核心颜色间的相互引用，可以通过提前定义基础颜色变量/对象的方式解决，具体方案如下：

实现步骤 #

1. 在配置文件顶部定义独立的核心颜色变量或对象，核心颜色之间可通过变量直接引用；
2. 在导出的theme.colors中复用这些预定义内容，衍生颜色直接引用核心颜色变量。

代码示例 #

// 预定义核心颜色变量，支持核心颜色间交叉引用
const neutral500 = '#63727D';
const primary500 = '#2563EB';

// 构建核心颜色对象
const coreColors = {
  neutral: {
    // ...其他中性色
    500: neutral500,
  },
  primary: {
    500: primary500,
    // 示例：核心颜色间引用，基于primary500定义更深的色调
    600: '#1D4ED8',
  }
};

module.exports = {
  theme: {
    colors: {
      core: coreColors,
      derived: {
        // ...其他衍生颜色
        text: {
          muted: neutral500, // 直接引用核心颜色变量
          primary: primary500
        }
      }
    }
  }
}

方案说明 #

• 该方案满足“所有颜色定义保留在当前文件内”的要求，同时支持核心颜色、衍生颜色的交叉引用；
• 你之前尝试的getter方法无效，是因为对象字面量中getter的this指向当前子对象（如derived.text），而非整个theme对象，无法跨层级访问core颜色；
• 如果需要基于已有核心颜色动态生成新颜色（如加深/减淡），可结合Tailwind内置颜色工具函数或第三方颜色处理库，在预定义变量阶段处理即可。

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