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

Question

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

Answer 1

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. 

Follow the below step to add the tailwind.config.js file in your folder.

Step 1: Run the below code to your folder’s terminal. This will create a package.json file.

npm init 

Step 2: Copy and paste the below code to your folder’s terminal. This will create the required node module for tailwind.

npm install tailwindcss@latest postcss@latest autoprefixer@latest

Step 3: Create a public folder and add index.html, style.css, and tailwind.css inside the public folder.

Step 4: Add the below code in the tailwind.css file. Using this file you can customize your tailwind CSS along with the default style. Tailwind will swap these directives out at build-time with all the styles it generates based on your configured design system.

@tailwind base;
@tailwind components;
@tailwind utilities;

Step 5: Open package.json file and under scripts section, add the below code

“scripts”: {
“build:css”: “tailwind build public/tailwind.css -o public/style.css”
},

Step 6: Run the below code in the terminal. This will populate your style.css file with predefined Tailwind CSS code.

npm run build:css

Step 7: Finally, run the below code. This will generate a Tailwind config file for your project using the Tailwind CLI utility included at the time of installation of the tailwindcss npm package.

npx tailwindcss init