Tailwind CSS:参考 tailwind.config.js 中的自定义颜色
Tailwind CSS: Referencing to custom color in tailwind.config.js
为了简化我的主题,我想引用我定义的自定义颜色,然后将它传递给一个函数以获得更亮或更暗的变体。
我使用以下(部分)代码扩展默认颜色主题:
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
,但似乎无法启动 运行。
任何有关如何执行此操作的线索将不胜感激。
干杯!
您可以创建新变量来保留扩展颜色的值:
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,
}
},
},
},
};
为了简化我的主题,我想引用我定义的自定义颜色,然后将它传递给一个函数以获得更亮或更暗的变体。
我使用以下(部分)代码扩展默认颜色主题:
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
,但似乎无法启动 运行。
任何有关如何执行此操作的线索将不胜感激。
干杯!
您可以创建新变量来保留扩展颜色的值:
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,
}
},
},
},
};