tailwind.config.js中可引用已定义颜色设置新变量及运行时修改吗？

你给出的配置写法不可行。
Tailwind 配置中仅支持在引用默认主题内置属性时使用theme()函数写法，你当前在同一个colors配置对象内引用同层级自定义的green值时，colors对象还处于解析阶段，theme('colors.green')无法读取到未解析完成的自定义颜色值，最终会返回undefined。

有两种常用的实现方案：

• 方案1：抽离公共变量提前定义
  把需要复用的颜色值定义为配置文件外的常量，再分别赋值给对应的颜色字段，示例代码如下：

// tailwind.config.js
const customGreen = '#36D585'

module.exports = {
  theme: {
    colors: {
      'green': customGreen,
      'header': customGreen
    }
  }
}

• 方案2：基于CSS变量定义关联关系
  在全局样式中用CSS变量定义颜色及关联关系，Tailwind配置直接绑定对应的CSS变量，示例代码如下：
  首先在全局入口CSS文件中定义变量：

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --color-green: #36D585;
  --color-header: var(--color-green);
}

再修改tailwind.config.js配置：

module.exports = {
  theme: {
    colors: {
      'green': 'var(--color-green)',
      'header': 'var(--color-header)'
    }
  }
}

Tailwind 是构建时工具，默认配置的静态颜色值会在项目构建阶段编译为固定的CSS类，无法在运行时直接修改Tailwind配置文件的内容来变更颜色。
如果使用上面第二种CSS变量的配置方案，你可以在运行时通过JS修改根节点的CSS变量值实现动态改色，示例代码如下：

// 运行时把header颜色修改为红色
document.documentElement.style.setProperty('--color-header', '#ff0000')

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