From 6cbed6600657f1a8d13fca102b408184f6d2592f Mon Sep 17 00:00:00 2001
From: khatabwedaa <khatabwedaa@gmail.com>
Date: Fri, 28 May 2021 11:08:06 +0200
Subject: [PATCH] Remove configration notes and added to components code

---
 components/Main.vue                   |  2 --
 components/ui/Heros/WithBGImage.vue   | 11 +++++++++++
 components/ui/Heros/WithImage.vue     | 11 +++++++++++
 components/ui/Heros/WithPattern.vue   | 11 +++++++++++
 components/ui/Heros/WithSideImage.vue | 11 +++++++++++
 5 files changed, 44 insertions(+), 2 deletions(-)

diff --git a/components/Main.vue b/components/Main.vue
index 6cff9f8..6931534 100644
--- a/components/Main.vue
+++ b/components/Main.vue
@@ -11,8 +11,6 @@
                     </div>
                 </div>
             </div>
-
-            <p class="mt-8 text-center text-gray-700 dark:text-gray-300"> Heros components require simple <span class="font-semibold">- don't panic please 😎 -</span><a href="https://gist.github.com/khatabwedaa/352573904a5b2d5ff3598bcd54ce9f04" target="_blank" class="text-blue-600 dark:text-blue-400 hover:underline"> configuration</a></p>
         </div>
 
         <div class="flex justify-center mb-10">
diff --git a/components/ui/Heros/WithBGImage.vue b/components/ui/Heros/WithBGImage.vue
index 95b0770..388b442 100644
--- a/components/ui/Heros/WithBGImage.vue
+++ b/components/ui/Heros/WithBGImage.vue
@@ -49,6 +49,17 @@
                 name: 'With Background Image',
                 isOpen: false,
                 code: `
+        <!-- Add this to your tailwind.config.js -->
+        module.exports = {
+            theme: {
+                extend: {
+                    spacing: {
+                        128: '32rem',
+                    },
+                },
+            },
+        }
+        
         <header>
             <nav class="bg-white shadow dark:bg-gray-800">
                 <div class="container px-6 py-4 mx-auto">
diff --git a/components/ui/Heros/WithImage.vue b/components/ui/Heros/WithImage.vue
index fdc9476..88b4651 100644
--- a/components/ui/Heros/WithImage.vue
+++ b/components/ui/Heros/WithImage.vue
@@ -108,6 +108,17 @@
                 name: 'With Image',
                 isOpen: false,
                 code: `
+        <!-- Add this to your tailwind.config.js -->
+        module.exports = {
+            theme: {
+                extend: {
+                    spacing: {
+                        128: '32rem',
+                    },
+                },
+            },
+        }
+
         <header class="bg-white dark:bg-gray-800">
             <nav class="border-b dark:border-gray-700">
                 <div class="container px-6 py-4 mx-auto md:flex md:justify-between md:items-center">
diff --git a/components/ui/Heros/WithPattern.vue b/components/ui/Heros/WithPattern.vue
index 2f9804b..c829402 100644
--- a/components/ui/Heros/WithPattern.vue
+++ b/components/ui/Heros/WithPattern.vue
@@ -58,6 +58,17 @@
             return {
                 name: 'With Pattern',
                 code: `
+        <!-- Add this to your tailwind.config.js -->
+        module.exports = {
+            theme: {
+                extend: {
+                    spacing: {
+                        128: '32rem',
+                    },
+                },
+            },
+        }
+
         <!-- Require css -->
         <style>
         .pattern {
diff --git a/components/ui/Heros/WithSideImage.vue b/components/ui/Heros/WithSideImage.vue
index d57693d..5f8a781 100644
--- a/components/ui/Heros/WithSideImage.vue
+++ b/components/ui/Heros/WithSideImage.vue
@@ -60,6 +60,17 @@
                 name: 'With Side Image',
                 isOpen: false,
                 code: `
+        <!-- Add this to your tailwind.config.js -->
+        module.exports = {
+            theme: {
+                extend: {
+                    spacing: {
+                        128: '32rem',
+                    },
+                },
+            },
+        }
+
         <header class="bg-white dark:bg-gray-800">
             <nav class="px-6 py-4 shadow">
                 <div class="items-center justify-between md:flex">