make this a custom color

home/_includes/cta.html

@@ -5,7 +5,7 @@
       <div class="lg:w-2/3 flex flex-col sm:flex-row sm:items-center items-start mx-auto">
         <h1 class="flex-grow sm:pr-16 text-2xl font-medium title-font cm-lgt-txt">{{ include.cta.text }}</h1>
         {% for item in include.cta.btn %}
-        <button href="{{ item.link }}" class="flex-shrink-0 text-white bg-primarylg border-0 py-2 px-8 focus:outline-none hover:bg-primary rounded text-lg mt-10 sm:mt-0">{{ item.text }}</button>
+        <button href="{{ item.link }}" class="flex-shrink-0 text-white bg-secondary border-0 py-2 px-8 focus:outline-none hover:bg-primary rounded text-lg mt-10 sm:mt-0">{{ item.text }}</button>
         {% endfor %}
       </div>
   {% unless include.no_container %}

home/_includes/features.html

@@ -3,7 +3,7 @@
       <div class="flex flex-wrap w-full mb-4">
         <div class="lg:w-1/2 w-full mb-6 lg:mb-0">
           <h1 class="sm:text-3xl text-2xl font-medium title-font mb-2 cm-lgt-txt">{{ include.data.header.title }}</h1>
-          <div class="h-1 w-20 bg-primarylg rounded"></div>
+          <div class="h-1 w-20 bg-secondary rounded"></div>
         </div>
         <p class="lg:w-1/2 w-full leading-relaxed text-gray-500">{{ include.data.header.text }}</p>
       </div>

home/_includes/footer.html

@@ -2,7 +2,7 @@
     <div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col">
       <div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left">
         <a class="flex title-font font-medium items-center md:justify-start justify-center cm-lgt-txt">
-          <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-10 h-10 text-white p-2 bg-primarylg rounded-full" viewBox="0 0 24 24">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-10 h-10 text-white p-2 bg-secondary rounded-full" viewBox="0 0 24 24">
             <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
           </svg>
           <span class="ml-3 text-xl">{{ site.title }}</span>

home/_includes/hero.html

@@ -11,7 +11,7 @@
         </h1>
         <p class="mb-8 leading-relaxed">Copper mug try-hard pitchfork pour-over freegan heirloom neutra air plant cold-pressed tacos poke beard tote bag. Heirloom echo park mlkshk tote bag selvage hot chicken authentic tumeric truffaut hexagon try-hard chambray.</p>
         <div class="flex justify-center">
-          <button class="inline-flex text-white bg-primarylg border-0 py-2 px-6 focus:outline-none hover:bg-primary rounded text-lg">Button</button>
+          <button class="inline-flex text-white bg-secondary border-0 py-2 px-6 focus:outline-none hover:bg-primary rounded text-lg">Button</button>
           <button class="ml-4 inline-flex text-gray-700 bg-gray-100 border-0 py-2 px-6 focus:outline-none hover:bg-gray-200 rounded text-lg">Button</button>
         </div>
       </div>

home/styles/index.css

@@ -28,11 +28,3 @@
         @apply text-gray-900
     }
 }
-
-.bg-primary {
-    background-color: blueviolet;
-}
-
-.bg-primarylg {
-    background-color: lightblue;
-}

home/tailwind.config.js

@@ -11,7 +11,14 @@ module.exports = {
         '{,!(node_modules|_site)/**/}*.{html,md}',
     ],
     darkMode: 'media',
-    theme: {},
+    theme: {
+        extend: {
+            colors: {
+              'primary':'#902eec',
+              'secondary':'#f580f5',
+            }
+        },
+    },
     plugins: [
         require('@tailwindcss/typography'),
     ],