How to add new colors to tailwind-css and keep the original ones?
You can simply concatinate them using "Array/Object spread operator" (...) and gather them all in a colors
variable.
// tailwind.config.js
const { colors: defaultColors } = require('tailwindcss/defaultTheme')
const colors = {
...defaultColors,
...{
"custom-yellow": {
"500": "#EDAE0A",
},
},
}
module.exports = {
"theme": {
"colors": colors,
}
};
Add your custom color values to theme > extend > colors section in tailwind.config.js
//tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'custom-yellow':'#BAA333',
}
},
},
}