我正在从我们的设计系统中导入一堆颜色标记。我想给予其中一种颜色一个别名,这样我就可以很容易地改变所有使用这个别名的元素的颜色。
下面是我在tailwind.config.js中尝试做的事情:
module.exports = {
content: ['./src/**/*.{js,jsx,ts,tsx}'],
important: '#root',
theme: {
colors: {
...myColors, //From design system
},
extend: {
colors: {
// This doesn't work :(
customColor: 'primary-50', //primary-50 is a token that comes from the designsystem import.
},
...
在做了这样的事情之后,我想我可以在我的元素上使用这样的颜色:
<div className="bg-customColor">My element</div>
//instead of this:
<div className="bg-primary-50">My element</div>
有没有什么方法可以做到这一点?或者我必须在我的index.css
中创建一个特殊的类,我将不得不使用它来代替?
1条答案
按热度按时间nszi6y051#
我明白了,Tailwind创建了一堆css变量,你可以引用这些变量来代替tailwind标记: