How to add new colors to tailwind-CSS and keep the original ones?
Answers (2)
Add AnswerYou 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, } };