title: customize a color in tailwind.config.js file
body: <p>I am currently building an VUE application. There I need to customize the primary color in <strong>litepie-datepicker</strong> to #A7F3D0(emerald series) in my tailwind.config.js file.</p>
  <p><a href="https://i.stack.imgur.com/Tt8E4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Tt8E4.png" alt="enter image description here" /></a></p>
  <p>I tried theses codes. But nothing is working</p>
  <pre><code>'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
  </code></pre>
  <p>This is my tailwind.config.js file</p>
  <pre><code>const path = require('path');
  const colors = require('tailwindcss/colors');
  
  module.exports = {
    purge: [
      &quot;./src/**/*.php&quot;,
      &quot;./src/**/*.html&quot;,
      &quot;./src/**/*.vue&quot;,
      &quot;./resources/**/*.php&quot;,
      &quot;./resources/**/*.html&quot;,
      &quot;./node_modules/@left4code/tw-starter/**/*.js&quot;,
      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: [],
  }
  </code></pre>
  <p>I search questions already on StackOverflow but didn't find a satisfying answer. I hope someone answers this.</p>
  <p>Thank you in advance.</p>