feat: add tailwind code for gradient background

Author: Dun-sin

index.html

@@ -1401,8 +1401,6 @@ <h2>Results</h2>
                 class="css-tailwind"
                 data-dropdown="gradient-border-dropdown2"
               >
-                <!-- dropdown elements -->
-
                 <div class="dropdown-item" data-download="gradient-border-code">
                   <iconify-icon
                     inline
@@ -1460,6 +1458,20 @@ <h2>Results</h2>
                   ></iconify-icon>
                   <span> Get CSS Code </span>
                 </div>
+                <div class="download-btn">
+                  <button
+                    class="btn"
+                    data-download="gradient-background-tailwind"
+                  >
+                    <iconify-icon
+                      inline
+                      icon="bx:code-alt"
+                      style="color: white; margin-right: 5px"
+                      width="20"
+                    ></iconify-icon>
+                    Get Tailwind
+                  </button>
+                </div>
               </div>
             </div>
           </div>

src/lib/packages/helpers.ts

@@ -247,7 +247,7 @@ function convertLinearGradientToTailwind(gradient: string): string {
 
   function generateTailwindClasses(colors: string[]): string {
     if (colors.length === 2) {
-      return `from-[${colors[0]}] [to-[${colors[1]}]`;
+      return `from-[${colors[0]}] to-[${colors[1]}]`;
     } else if (colors.length === 3) {
       return `from-[${colors[0]}] via-[${colors[1]}] to-[${colors[2]}]`;
     } else if (colors.length === 4) {
@@ -286,6 +286,11 @@ export const actOnTailwindGenerator = (
     case 'gradient-border':
       codeToCopy = ``;
       break;
+    case 'gradient-background':
+      codeToCopy = `${convertLinearGradientToTailwind(
+        element.backgroundImage
+      )}`;
+      break;
     case 'border-radius':
       codeToCopy = `bg-[${element.borderRadius.replace(/ /g, '_')}]`;
       break;

src/pages/gradient-background.ts

@@ -10,6 +10,8 @@ import {
   getDegreeSpanElement,
   getGradientPreview,
   getCssOrTailwindDropdown,
+  getTailwindButton,
+  getCssOrTailwindButton,
 } from '../lib/getElements';
 import {
   copyCSSCodeToClipboard,
@@ -21,6 +23,7 @@ import {
   createGradientPreview,
   getColorsValue,
   closeDropdown,
+  copyTailwindCodeToClipboard,
 } from '../lib/packages/utils';
 
 type Values = {
@@ -39,6 +42,40 @@ const resetButton = getResetButton(attribute);
 const getCssOrTailwindDropdownElement = getCssOrTailwindDropdown(attribute);
 const showCopyClass = 'show-css-tailwind';
 
+export function gradientBackgroundGenerator(
+  type: 'newResults' | 'oldResults' | null
+) {
+  if (type === null) return;
+
+  const getOutputElement = getOutput(attribute);
+  const resultPage = getResultPage();
+
+  resultPage.style.display = 'flex';
+  if (type === 'oldResults') return;
+
+  const values: Values = {
+    degree: getDegreeElement.value,
+  };
+  getGradientBackgroundResult(attribute, values, getOutputElement);
+}
+
+export function addGradientBackgroundListener() {
+  whatColorButtonShouldShow(attribute);
+  getNewColorButtonElement.addEventListener('click', () => {
+    addNewColorPicker(attribute);
+    addEventListenerToTheNewColorPicker();
+  });
+
+  getRemoveColorButtonElement.addEventListener('click', () => {
+    removeColorPicker(attribute);
+    addEventListenerToTheNewColorPicker();
+  });
+
+  inputEventListner();
+
+  setGradientDegreeValue(getDegreeElement);
+}
+
 function copyHandler() {
   const outputElement = getOutput(attribute);
   copyCSSCodeToClipboard(attribute, outputElement);
@@ -54,9 +91,6 @@ function getCssOrTailwind(e?: MouseEvent): void {
   getCssOrTailwindDropdownElement.classList.toggle(showCopyClass);
 }
 
-// closes css and tailwind dropdown on outside click
-closeDropdown(getCssOrTailwind, getCssOrTailwindDropdownElement, showCopyClass);
-
 /**
  * sets the result to the output element
  *
@@ -74,41 +108,13 @@ function getGradientBackgroundResult(
   }deg, ${getColorsValue(attribute).join(', ')})`;
 
   const getCodeButtonElement = getCopyCodeButton(attribute);
-  getCodeButtonElement.addEventListener('click', copyHandler);
-}
-
-export function gradientBackgroundGenerator(
-  type: 'newResults' | 'oldResults' | null
-) {
-  if (type === null) return;
-
-  const getOutputElement = getOutput(attribute);
-  const resultPage = getResultPage();
-
-  resultPage.style.display = 'flex';
-  if (type === 'oldResults') return;
-
-  const values: Values = {
-    degree: getDegreeElement.value,
-  };
-  getGradientBackgroundResult(attribute, values, getOutputElement);
-}
-
-export function addGradientBackgroundListener() {
-  whatColorButtonShouldShow(attribute);
-  getNewColorButtonElement.addEventListener('click', () => {
-    addNewColorPicker(attribute);
-    addEventListenerToTheNewColorPicker();
-  });
+  const getTailwindCodeButtonElement = getTailwindButton(attribute);
+  const getCssOrTailwindButtonElement = getCssOrTailwindButton(attribute);
 
-  getRemoveColorButtonElement.addEventListener('click', () => {
-    removeColorPicker(attribute);
-    addEventListenerToTheNewColorPicker();
-  });
-
-  inputEventListner();
+  getCodeButtonElement.addEventListener('click', copyHandler);
+  getTailwindCodeButtonElement.addEventListener('click', tailwindHandler);
 
-  setGradientDegreeValue(getDegreeElement);
+  getCssOrTailwindButtonElement.addEventListener('click', getCssOrTailwind);
 }
 
 function addEventListenerToTheNewColorPicker() {
@@ -153,7 +159,6 @@ function resetValues() {
 }
 
 // get values from all targets to get notified when values change.
-
 function getValues() {
   gradientBackgroundInputs.forEach((input) => {
     input.addEventListener('input', () => {
@@ -164,5 +169,20 @@ function getValues() {
     });
   });
 }
+
+// Tailwind codecopy handler
+function tailwindHandler() {
+  const outputElement = getOutput(attribute);
+  copyTailwindCodeToClipboard(attribute, outputElement);
+
+  showPopup(
+    'Tailwind Code Copied',
+    'Code has been successfully copied to clipboard',
+    'success'
+  );
+}
+
+closeDropdown(getCssOrTailwind, getCssOrTailwindDropdownElement, showCopyClass);
+
 resetValues();
 getValues();

src/style.css

@@ -924,8 +924,7 @@ input[type='number']::-webkit-outer-spin-button {
 
 .btn-dropdown-container,
 .image-download {
-  width: var(--generator-width);
-  display: inline-block;
+  display: block;
   justify-content: center;
   align-items: center;
   position: relative;