background gradient added

muhammadshakkeerp · Sep 10, 2024 · 29d5fcc · 29d5fcc
1 parent 1fa7bbd
commit 29d5fcc
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -37,7 +37,7 @@ const App: FC<ProductProps> = () => {
   }
 
   return (
-    <div className={`${DarkMode?.isEnabled ? "dark:bg-darkModeBg text-darkModeText" : "bg-primaryColor"} relative`}>
+    <div className={`${DarkMode?.isEnabled ? "dark:bg-darkModeBg text-darkModeText" : "bg-gradient-primary from-primary-start to-parimary-end"} relative`}>
       {showPopUp && <PopupCard setShowPopUp={setShowPopUp} />}
       <Header toggleDarkMode={() => { }} />
       <Suspense fallback={<div className="text-center mt-10">Loading...</div>} >

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -23,7 +23,16 @@ export default {
         lightGray:"#D1D5DB",
         primary:"#2874f0"
       },
-
+      backgroundImage: {
+        'gradient-primary': 'linear-gradient(to right, var(--tw-gradient-stops))',
+        'gradient-secondary': 'linear-gradient(to bottom, var(--tw-gradient-stops))',
+      },
+      gradientColorStops: theme => ({
+        'primary-start': theme('colors.primaryColor'),
+        'primary-end': theme('colors.secondaryColor'),
+        'dark-start': theme('colors.darkModeBg'),
+        'dark-end': theme('colors.dark'),
+      }),
 
     },
   },