customize a color in tailwind.config.js file - vue.js

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.

Answer 1

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'
}
}
}
}
}