英文:
How to create an alias for a color in TailwindCSS?
问题
我正在从我们的设计系统导入一堆颜色令牌。我想给其中一种颜色取个别名，以便我可以轻松地更改使用这个别名的所有元素的颜色。
这是我在tailwind.config.js中尝试做的事情：
module.exports = {
content: ['./src/**/*.{js,jsx,ts,tsx}'],
important: '#root',
theme: {
colors: {
...myColors, //来自设计系统
},
extend: {
colors: {
// 这行不起作用 :(
customColor: 'primary-50', //primary-50是来自设计系统导入的令牌。
},
...
在像这样做了某些操作之后，我在元素上可以像这样使用颜色：
<div className="bg-customColor">我的元素</div>
//而不是这样：
<div className="bg-primary-50">我的元素</div>
是否有办法做类似的事情？还是我必须在我的 `index.css` 中创建一个特殊的类，然后使用它？
英文:
I am importing a bunch of color-tokens from our designsystem. I want to give an alias to one of these colors so that I can easily change the color of all the elements that use this alias.
Here is what I'm trying to do in my 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.
},
...
After doing something like this I was thinking that I could use the color like so on my elements:
<div className="bg-customColor">My element</div>
//instead of this:
<div className="bg-primary-50">My element</div>
Is there any way to do something like this? Or do I have to create a special class in my index.css that I'll have to use instead?
答案1
得分: 0
搞定了。Tailwind 生成了一堆 CSS 变量，你可以引用它们而不是 tailwind-token：
module.exports = {
content: ['./src/**/*.{js,jsx,ts,tsx}'],
important: '#root',
theme: {
colors: {
...myColors, //来自设计系统
},
extend: {
colors: {
// 这样就可以了！ :)
customColor: 'var(--color-primary-50)',
},
...
英文:
Figured it out. Tailwind creates a bunch of css-variables which you can reference instead of the tailwind-token:
module.exports = {
content: ['./src/**/*.{js,jsx,ts,tsx}'],
important: '#root',
theme: {
colors: {
...myColors, //From design system
},
extend: {
colors: {
// This works! :)
customColor: 'var(--color-primary-50)',
},
...
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论