如何在tailwind.config.js中引用自定义颜色生成渐变变体？

问题原因 #

Tailwind配置文件导出的是普通JS对象，对象字面量内部无法通过this引用同一对象下的其他属性，你写的this.theme.extend.colors在当前上下文没有对应指向，自然获取不到值。

解决方案 #

把公共的颜色定义提前抽成独立变量，直接在配置的多处复用即可，示例代码如下：

// 提前定义可复用的颜色配置
const primary = {
  DEFAULT: '#325889',
  light: '#5aacbb',
  lighter: '#5ebebf',
}

// 你的渐变生成函数也可以提前定义在这里
function getGradientStop(start, end, percent) {
  // 你的渐变计算逻辑
}

module.exports = {
  theme: {
    extend: {
      colors: {
        primary,
        gradient: {
          '0/3': primary,
          '1/3': getGradientStop(primary, primary.lighter, 33.333),
          '2/3': getGradientStop(primary, primary.lighter, 66.666),
          '3/3': primary.lighter,
        }
      },
    },
  },
}

如果需要引用Tailwind内置的默认主题颜色，可以导入Tailwind提供的resolveConfig工具读取完整配置，自定义配置项优先使用抽变量的方案，更简单直观。

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