Reputation: 1559
I want to use color variable (default, or extended) to my extended theme like:
module.exports = {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {
colors: {
lime: {
'100': 'green'
}
},
backgroundColor: {
skin: {
base: 'bg-red-500',
secondary: 'lime-100',
},
},
},
},
plugins: [],
};
but this isn't working. How can I have a class bg-skin-base
equivalent to bg-red-500
and another class bg-skin-secondary
that is equivalent to bg-[green]
?
Upvotes: 2
Views: 12203
Reputation: 800
There isn't a backgroundColor. Any colors added under extend > colors are available for text-
, bg-
, border-
etc.
Just add skin under colors and you should be good.
const colors = require("tailwindcss/colors")
extend: {
colors: {
lime: {
'100': 'green'
},
skin: {
base: '#yourhex",
secondary: '#yourhex",
third: colors.violet["500"]
}
},
}
You can't use bg-red-500 like you have in your example for base. If you are looking to alias a tailwind color you can either use the hex or use tailwind colors by const colors = require("tailwindcss/colors")
and then you can do colors.red[500]
or whatever color you want.
Upvotes: 5