Tailwind CSS：在tailwind.config.js 中引用自定义颜色答案

【问题标题】：Tailwind CSS: Referencing to custom color in tailwind.config.jsTailwind CSS：在tailwind.config.js 中引用自定义颜色
【发布时间】：2021-11-23 15:12:27
【问题描述】：

为了简化我的主题，我想引用我定义的自定义颜色，然后将其传递给函数以获得更亮或更暗的变体。

我使用以下（部分）代码扩展了默认颜色主题：

module.exports = {
    theme: {
        extend: {
            colors: {
                primary: {
                    DEFAULT: '#325889',
                    light: '#5aacbb',
                    lighter: '#5ebebf',
                },
            },
        },
    },
}

现在我的目标是以某种方式引用另一个自定义颜色变体中的 colors.primary 以将其传递给自定义函数，如下所示：

module.exports = {
    theme: {
        extend: {
            colors: {
                primary: {
                    DEFAULT: '#325889',
                    light: '#5aacbb',
                    lighter: '#5ebebf',
                },
                gradient: {
                    '0\/3': this.theme.extend.colors.primary,
                    '1\/3': getGradientStop(this.theme.extend.colors.primary, this.theme.extend.colors.primary.lighter, 33.333),
                    '2\/3': getGradientStop(this.theme.extend.colors.primary, this.theme.extend.colors.primary.lighter, 66.666),
                    '3\/3': this.theme.extend.colors.primary.lighter,
                }
            },
        },
    },
}

但是，我似乎无法以任何方式引用原色。我尝试了this.colors.primary、this.theme.extend.colors.primary，但似乎无法启动和运行。

任何有关如何做到这一点的线索将不胜感激。

干杯！

【问题讨论】：

标签： javascript tailwind-css tailwind-in-js module-export

【解决方案1】：

您可以创建新变量来保留扩展颜色的值：

const primary = '#325889';
const primaryLight = '#5aacbb';
const primaryLighter = '#5ebebf';

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

【讨论】：