How to add new colors to tailwind-CSS and keep the original ones?

Forums CSSHow to add new colors to tailwind-CSS and keep the original ones?
Staff asked 6 months ago

How to add new colors to tailwind-CSS and keep the original ones?

Answers (2)

Add Answer
Umang Ramani Marked As Accepted
Staff answered 4 months ago

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: [],
}

 

 

Staff answered 6 months ago

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,
    }
};

 

Subscribe

Select Categories