How to add new colors to tailwind-CSS and keep the original ones?
Jun 9, 2022
Answers (2)
Add Answer
You can easily add new colors to Tailwind CSS and keep the originals ones using customization configuration. You can configure your colors under the colors key in the theme section of your tailwind.config.js file.
const colors = require('tailwindcss/colors')
module.exports = {
mode: 'jit',
theme: {
extend: {
colors: {
// Configure your color palette here
'custom-green':'#66bb6a',
},
},
},
variants: {},
plugins: [],
}
You can simply concatenate 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,
}
};
