Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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

Syntax:

colors: {
    // each color has a specific name. you can replace 
    // 'custom-color' with the name you like
    // replace '#66bbfa' with the colors you like.
    'custom-color': '#66bbfa'
}

Add the below code to your tailwind.config.js file, and now you can customize your color by adding your own color code.

tailwind.config.js




const colors = require('tailwindcss/colors')
  
module.exports = {
  mode: 'jit',
  theme: {
    extend: {
      colors: {
      // Configure your color palette here
       'custom-green':'#66bb6a',
      },
    },
  },
  variants: {},
  plugins: [],
}


Example :

HTML




<!DOCTYPE html>
<html>
<body class="text-center mx-4 space-y-2">
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1>
    <b>Tailwind CSS Customize colors</b>
      
    <div class="h-60 w-25 m-5 bg-custom-green">
        GEEKSFORGeeks
    </div>
</body>
  
</html>


Output:



Last Updated : 18 Jun, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads