tailwind-css

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


How can I add colors to default scheme? Here is my tailwindcss file.

const { colors: defaultColors } = require('tailwindcss/defaultTheme')

module.exports = {
    "theme": {
        "colors": defaultColors + {
            "custom-yellow": {
                "500": "#EDAE0A",
            }
        },
    },
};

Solution

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