customize a color in tailwind.config.js file

Question

I am currently building an VUE application. There I need to customize the primary color in litepie-datepicker to #A7F3D0(emerald series) in my tailwind.config.js file.

I tried theses codes. But nothing is working

'litepie-primary':'#A7F3D0', // color system for light mode
'litepie-secondary': colors.coolGray // color system for dark mode

 'litepie-primary': colors.emerald[200], // color system for light mode
 'litepie-secondary': colors.coolGray // color system for dark mode

This is my tailwind.config.js file

const path = require('path');
const colors = require('tailwindcss/colors');

module.exports = {
  purge: [
    "./src/**/*.php",
    "./src/**/*.html",
    "./src/**/*.vue",
    "./resources/**/*.php",
    "./resources/**/*.html",
    "./node_modules/@left4code/tw-starter/**/*.js",
    path.resolve(__dirname, './node_modules/litepie-datepicker/**/*.js')
  ],
  darkMode: 'class', // or 'media' or 'class'
  theme: {
    extend: {
      width: {
        '1/7': '14.2857143%',
      },
      colors: {
        'primary': '#00a69c',
        'secondary': '#343a40',
        
        
        'litepie-primary': colors.emerald, // color system for light mode
        'litepie-secondary': colors.coolGray // color system for dark mode
      }
    },
  },
  variants: {
    extend: {
      cursor: ['disabled'],
      textOpacity: ['disabled'],
      textColor: ['disabled']
    },
  },
  plugins: [],
}

I search questions already on StackOverflow but didn't find a satisfying answer. I hope someone answers this.

Thank you in advance.

Ihar Aliakseyenka Ihar Aliakseyenka · Accepted Answer · 2021-07-09T19:00:50

Litepie Datepicker already set litepie-primary as emerald. You can check it on their Github repository

// lines 20, 21
'litepie-primary': colors.emerald,
'litepie-secondary': colors.coolGray

As a primary color (color of selected date) they are using litepie.primary[500] which is rgb(16, 185, 129). My guess you need to change this color. I will show only relevant to colors part of your config

const colors = require('tailwindcss/colors');

// Change '500' key. To make it noticeable I'll change it to red
colors.emerald[500] = 'red';

module.exports = {
  ...
  theme: {
    extend: {
      colors: {
        'litepie-primary': colors.emerald
      }
    }
  }
  ...
}

Let's check

<div class="text-litepie-primary-50">50</div>
<div class="text-litepie-primary-100">100</div>
<div class="text-litepie-primary-200">200</div>
<div class="text-litepie-primary-300">300</div>
<div class="text-litepie-primary-400">400</div>
<div class="text-litepie-primary-500">500 This should be red</div>
<div class="text-litepie-primary-600">600</div>
<div class="text-litepie-primary-700">700</div>
<div class="text-litepie-primary-800">800</div>
<div class="text-litepie-primary-900">900</div>

To make it #A7F3D0 you can pass it directly as a string or by default color

// colors.emerald[500] = '#A7F3D0';
colors.emerald[500] = colors.emerald[200];

Alternatively if you wish to change whole pallete to your customs provide object with Tailwind's keys

module.exports = {
  theme: {
    extend: {
      colors: {
        'litepie-primary': {
           50: '#color50',
           100: '#color100',
           ...
           900: '#color900'
         }
      }
    }
  }
}

customize a color in tailwind.config.js file

1 Answers