opti major + refact tailwind for btn + filter

src/app/creation/create-joins-page/create-joins-page.component.html

@@ -39,11 +39,11 @@
       <div *ngFor="let hop of requestInfoJoin; index as i" >
         <app-joins-table [allAlias]="aliasData" [passJoinData]="allData[i]" (data)="retrieveData($event, i)" id="{{hop}}"></app-joins-table>
         <div class="sm:inline-flex sm:space-x-4">
-          <button (click)="addTable()" type="button" class="text-white bg-gradient-to-br from-pink-500 to-orange-400 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-pink-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2">Ajouter une Jointure</button>
+          <button (click)="addTable()" type="button" class="btn-grad-pink-orange mr-2 mb-2">Ajouter une Jointure</button>
 
-          <button *ngIf="!oneJoinRemaining" (click)="removeTable(i)" type="button" class="text-gray-900 bg-gradient-to-r from-red-200 via-red-300 to-yellow-200 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-red-100 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2">Supprimer cette jointure</button>
+          <button *ngIf="!oneJoinRemaining" (click)="removeTable(i)" type="button" class="btn-grad-red-yellow mr-2 mb-2">Supprimer cette jointure</button>
 
-          <button (click)="addCondition()" type="button" class="text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-green-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2">Ajouter une Condition</button>
+          <button (click)="addCondition()" type="button" class="btn-grad-green-blue mr-2 mb-2">Ajouter une Condition</button>
         </div>
       </div>
     </div>
@@ -52,9 +52,9 @@
       <div *ngFor="let whereCards of whereCardList; index as i" >
         <app-where-card [allAlias]="aliasData" [childIndex]="i" id="{{whereCards}}" (conditionData)="getConditionData($event, i)"></app-where-card>
         <div class="sm:inline-flex sm:space-x-4">
-          <button (click)="addCondition()" type="button" class="text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-green-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2">Ajouter une Condition</button>
+          <button (click)="addCondition()" type="button" class="btn-grad-green-blue mr-2 mb-2">Ajouter une Condition</button>
 
-          <button (click)="removeWhereCard(i)" type="button" class="text-white bg-gradient-to-r from-cyan-500 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-cyan-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2">Supprimer cette Condition</button>
+          <button (click)="removeWhereCard(i)" type="button" class="btn-grad-cyon-blue mr-2 mb-2">Supprimer cette Condition</button>
         </div>
       </div>
     </div>

src/app/creation/create-joins-page/create-joins-page.component.ts

@@ -190,50 +190,55 @@ export class CreateJoinsPageComponent implements OnInit, AfterViewInit{
 
     public removeTable(i: number){
       this.requestInfoJoin.splice(i, 1);
-      const deleteAlias = this.allData[i].aliasSpecificTable;
-      let aliasSplitName = deleteAlias.slice(0, -1);
-      this.allData.splice(i, 1);
-      this.aliasData.shift();
 
-      this.checkAndRemoveIfAliasWasUse(deleteAlias);
+      if(this.allData[i]){
+        const deleteAlias = this.allData[i].aliasSpecificTable;
+        let aliasSplitName = deleteAlias.slice(0, -1);
+        this.allData.splice(i, 1);
+        this.aliasData.shift();
 
-      let indexOfHighest = -1;
+        this.checkAndRemoveIfAliasWasUse(deleteAlias);
-      let highestValue = 0;
-      let tempAlias;
-      let inInclude = false;
 
-      if(this.allData.length === 0){
+        let indexOfHighest = -1;
-        this.requestInfoJoin.push(new JoinsTableComponent(this.infoColumnService, this.infoTableService));
+        let highestValue = 0;
-      } else {
+        let tempAlias;
-        this.allData.forEach((join, ind) => {
+        let inInclude = false;
-          const alias = join.aliasSpecificTable;
+
-          if(alias.includes(aliasSplitName.toString())){
+        if(this.allData.length === 0){
-            tempAlias = alias.slice(-1);
+          this.requestInfoJoin.push(new JoinsTableComponent(this.infoColumnService, this.infoTableService));
-            let numTempAlias = +tempAlias;
+        } else {
-            if(numTempAlias > highestValue){
+          this.allData.forEach((join, ind) => {
-              indexOfHighest = ind;
+            const alias = join.aliasSpecificTable;
-              highestValue = numTempAlias;
+            if(alias.includes(aliasSplitName.toString())){
+              tempAlias = alias.slice(-1);
+              let numTempAlias = +tempAlias;
+              if(numTempAlias > highestValue){
+                indexOfHighest = ind;
+                highestValue = numTempAlias;
+              }
+              inInclude = true;
             }
-            inInclude = true;
+          })
-          }
+        }
-        })
+        if(inInclude && highestValue != 0){
-      }
+          this.allData[indexOfHighest].aliasSpecificTable = deleteAlias || "";
-      if(inInclude && highestValue != 0){
+          this.aliasData.splice(i, 1);
-        this.allData[indexOfHighest].aliasSpecificTable = deleteAlias || "";
+          this.aliasData[indexOfHighest].nameAlias = deleteAlias;
-        this.aliasData.splice(i, 1);
+        } else {
-        this.aliasData[indexOfHighest].nameAlias = deleteAlias;
+          this.aliasData.splice(i, 1);
-      } else {
+        }
-        this.aliasData.splice(i, 1);
+        if(this.baseAlias){
-      }
+          this.aliasData.unshift(this.baseAlias);
-      if(this.baseAlias){
+        }
-        this.aliasData.unshift(this.baseAlias);
       }
+
       this.checkLength();
       this.aliasData = [...this.aliasData]
       this.refreshRequestData();
     }
 
     public checkLength(){
+      console.log(this.requestInfoJoin.length);
       if(this.requestInfoJoin.length > 1){
         this.oneJoinRemaining = false;
       } else {

src/app/creation/joins-table/joins-table.component.html

@@ -47,9 +47,9 @@
     <app-columns-card [baseColumns]="baseColumns" [specificColumns]="specificColumns" [childIndex]="ind" (selectedColumn)="retrieveColumnsData($event, ind)"></app-columns-card>
 
     <div class="inline-flex space-x-4">
-      <button (click)="addSelectColumns()" type="button" class="text-white text-lg bg-gradient-to-br from-teal-400 to-green-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-pink-200 font-medium rounded-full px-5 py-2.5 text-center mr-2 my-2">+</button>
+      <button (click)="addSelectColumns()" type="button" class="btn-grad-green-teal mr-2 my-2">+</button>
 
-      <button *ngIf="columnsInfo.length > 1" (click)="removeSelectColumns(ind)" type="button" class="text-gray-900 text-lg bg-gradient-to-br from-rose-600 to-red-400 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-red-100 font-medium rounded-full px-5 py-2.5 text-center my-2">-</button>
+      <button *ngIf="columnsInfo.length > 1" (click)="removeSelectColumns(ind)" type="button" class="btn-grad-red-rose my-2">-</button>
     </div>
   </div>
 </div>

src/app/custom-pipe/CustomInfoTableSearchPipe.ts

@@ -7,15 +7,30 @@ import { Pipe, PipeTransform } from '@angular/core';
     pure: false
 })
 export class CustomFilterTable implements PipeTransform {
-    transform(items: InfoTable[], filter: string): any {
+  transform(items: InfoTable[], filter: string): any {
-        if (!items || !filter) {
+      if (!items || !filter) {
-            return items;
+          return items;
-        }
+      }
-        // filter items array, items which match and return true will be
+
-        // kept, false will be filtered out
+      // Filter items array, keeping items that match the filter
-        if(filter){
+      const filteredItems = items.filter(item => item.nameTable.toLowerCase().indexOf(filter.toLowerCase()) !== -1);
-          return items.filter(item => item.nameTable.toLowerCase().indexOf(filter.toLowerCase()) !== -1);
+
-        }
+      // Sort the filtered items by the length of the text in ascending order
-
+      const sortedItems = filteredItems.sort((a, b) => {
-    }
+          if (a.nameTable.length < b.nameTable.length) {
+              return -1;
+          } else if (a.nameTable.length > b.nameTable.length) {
+              return 1;
+          } else {
+              return 0;
+          }
+      });
+
+      return sortedItems;
+  }
 }
+
+
+
+
+

src/app/manager/add-script/add-script.component.html

@@ -2,8 +2,8 @@
 <div class="flex sm:flex-nowrap flex-wrap sm:space-x-4 my-4">
   <div class="w-full sm:w-2/3 h-full text-center rounded-lg overflow-hidden shadow-lg bg-white p-4 ">
     <div class="flex">
-      <button (click)="isNewFile()" class="text-white bg-gradient-to-r from-purple-500 to-pink-500 hover:bg-gradient-to-l focus:ring-4 focus:outline-none focus:ring-purple-200 font-semibold py-2 px-4 rounded shadow m-2" >Nouveau</button>
+      <button (click)="isNewFile()" class="btn-grad-purple-pink m-2" >Nouveau</button>
-      <button (click)="isExistingFile()" class="text-white bg-gradient-to-r from-purple-500 to-pink-500 hover:bg-gradient-to-l focus:ring-4 focus:outline-none focus:ring-purple-200 font-semibold py-2 px-4 rounded shadow m-2" >Fichier Existant</button>
+      <button (click)="isExistingFile()" class="btn-grad-purple-pink m-2" >Fichier Existant</button>
     </div>
     <div class="rounded-lg overflow-hidden shadow-lg bg-slate-100 border-solid border-orange-400 border-2 p-4">
       <div *ngIf="newFile">
@@ -64,7 +64,7 @@
 (onDeSelectAll)="onDeselectAll($event)"
 >
 </ng-multiselect-dropdown>
-    <button (click)="addScriptToCentral()" type="button" class="text-gray-900 bg-gradient-to-r from-teal-200 to-lime-200 hover:bg-gradient-to-l hover:from-teal-200 hover:to-lime-200 focus:ring-4 focus:outline-none focus:ring-lime-200  font-semibold rounded-lg px-4 py-2 text-center mr-2 mb-2 mt-4">Ajouter le Script</button>
+    <button (click)="addScriptToCentral()" type="button" class="btn-grad-teal-lime mr-2 mb-2 mt-4">Ajouter le Script</button>
 
 
   </div>

src/app/manager/edit-script/edit-script.component.html

@@ -33,7 +33,7 @@
 (onDeSelectAll)="onDeselectAll($event)"
 >
 </ng-multiselect-dropdown>
-    <button (click)="editScript()" type="button" class="text-gray-900 bg-gradient-to-r from-teal-200 to-lime-200 hover:bg-gradient-to-l hover:from-teal-200 hover:to-lime-200 focus:ring-4 focus:outline-none focus:ring-lime-200  font-semibold rounded-lg px-4 py-2 text-center mr-2 mb-2 mt-4">Modifier le Script</button>
+    <button (click)="editScript()" type="button" class="btn-grad-teal-lime mr-2 mb-2 mt-4">Modifier le Script</button>
   </div>
 </div>
 

src/app/manager/script-management/script-management.component.html

@@ -1,14 +1,14 @@
 <div class="max-w-full rounded-2xl overflow-hidden shadow-lg bg-white">
   <div class="m-2 justify-items-center grid grid-cols-1 sm:grid-cols-12 gap-4 ">
     <div class="sm:col-span-3 my-auto">
-      <button class="flex text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-blue-300 font-semibold py-2 px-4 rounded shadow m-2" (click)="getAllScriptsWithTags(); getAllScripts()">Rafraichir</button>
+      <button class="flex btn-grad-purple-blue m-2" (click)="getAllScriptsWithTags(); getAllScripts()">Rafraichir</button>
     </div>
     <div class="sm:col-span-6 my-auto text-2xl font-bold">
       Gestionnaire de Scripts
     </div>
     <div class="sm:col-span-3 my-auto md:flex">
-      <a routerLink="/tagsmanagement" class="flex text-black text-center bg-gradient-to-r from-red-200 via-red-300 to-yellow-200 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-red-100 dark:focus:ring-red-400 font-semibold py-2 px-4 rounded shadow m-2" >Gérer les Tags</a>
+      <a routerLink="/tagsmanagement" class="flex btn-grad-red-yellow font-semibold m-2" >Gérer les Tags</a>
-      <button (click)="addScript()" class="flex text-black bg-gradient-to-r from-red-200 via-red-300 to-yellow-200 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-red-100 dark:focus:ring-red-400 font-semibold py-2 px-4 rounded shadow m-2" >Ajouter un Script</button>
+      <button (click)="addScript()" class="flex btn-grad-red-yellow font-semibold m-2" >Ajouter un Script</button>
     </div>
   </div>
 </div>

src/app/manager/tags-management/tags-management.component.html

@@ -2,9 +2,9 @@
 <div class="text-center rounded-lg overflow-hidden shadow-lg bg-white p-4 my-4">
   <div class="text-2xl font-bold">Gestion des Tags</div>
   <div class="grid grid-cols-3 gap-4 mt-2">
-    <button class="text-black bg-gradient-to-r from-teal-200 to-lime-200 hover:bg-gradient-to-l hover:from-teal-200 hover:to-lime-200 focus:ring-4 focus:outline-none focus:ring-lime-200 font-semibold py-2 px-2 rounded shadow mx-2" (click)="addPress = !addPress">Ajouter un Tag</button>
+    <button class="btn-grad-teal-lime mx-2" (click)="addPress = !addPress">Ajouter un Tag</button>
     <input [(ngModel)]="filterTag" type="text" class="block w-full my-2 pl-2 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-slate-800 focus:border-slate-800" placeholder="Rechercher...">
-    <button class="text-white bg-gradient-to-br from-pink-500 to-orange-400 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-pink-200  font-semibold py-2 px- rounded shadow mx-2" (click)="deleteAllTags()" disabled>Supprimer tous les Tags</button>
+    <button class="btn-grad-pink-orange mx-2" (click)="deleteAllTags()" disabled>Supprimer tous les Tags</button>
   </div>
 
   <div *ngIf="addPress">
@@ -19,7 +19,7 @@
         <input [(ngModel)]="descOfTag" type="text" class="block w-full my-2 pl-2 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-slate-800 focus:border-slate-800" placeholder="Taper la description ici...">
       </div>
     </div>
-    <button class="text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-green-200 font-semibold py-2 px-2 rounded shadow mx-2 mt-4" (click)="addTag()">Valider</button>
+    <button class="btn-grad-green-blue mx-2 mt-4" (click)="addTag()">Valider</button>
   </div>
 
   <div class="bg-orange-400 w-full h-2 overflow-hidden my-4 rounded-lg"></div>
@@ -39,7 +39,7 @@
         <input [(ngModel)]="modifyDesc" type="text" class="block w-full my-2 pl-2 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-slate-800 focus:border-slate-800" placeholder="Taper la description ici...">
       </div>
     </div>
-    <button class="text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-green-200 font-semibold py-2 px-2 rounded shadow mx-2 my-4" (click)="modifyTag()">Valider</button>
+    <button class="btn-grad-green-blue mx-2 my-4" (click)="modifyTag()">Valider</button>
   </div>
 
   <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
@@ -47,8 +47,8 @@
       <div class="text-white font-bold">Nom du Tag : {{ tag.nameTag }}</div>
       <div class="text-white">{{ tag.descriptionTag }}</div>
       <div class="flex justify-between my-2">
-        <button class="text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-blue-300 font-semibold py-2 px-2 rounded shadow mx-2" (click)="pressModifyBtn(tag.tagId, tag.nameTag, tag.descriptionTag)">Modifier</button>
+        <button class="btn-grad-purple-blue mx-2" (click)="pressModifyBtn(tag.tagId, tag.nameTag, tag.descriptionTag)">Modifier</button>
-        <button class="text-white bg-gradient-to-br from-pink-500 to-orange-400 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-pink-200 font-semibold py-2 px-2 rounded shadow mx-2" (click)="deleleTag(tag)">Supprimer</button>
+        <button class="btn-grad-pink-orange mx-2" (click)="deleleTag(tag)">Supprimer</button>
       </div>
     </div>
   </div>

src/app/menu/navbar/navbar.component.html

@@ -15,17 +15,15 @@
         <img routerLink="" class="hidden h-8 w-auto lg:block hover:cursor-pointer" src="../../assets/images/logo-apsidetop-blanc.png" alt="Your Company">
       </div>
       <div class="hidden md:ml-6 md:flex space-x-4" id="extend-menu">
-        <a routerLinkActive="active" routerLink="request" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium ">Recherche</a>
+        <a routerLinkActive="active" routerLink="request" class="btn-gray-simple">Recherche</a>
 
-        <a routerLinkActive="active" routerLink="joins" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium ">Jointures</a>
+        <a routerLinkActive="active" routerLink="joins" class="btn-gray-simple">Jointures</a>
 
-        <a routerLinkActive="active" routerLink="createjoins" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium ">Création</a>
+        <a routerLinkActive="active" routerLink="createjoins" class="btn-gray-simple">Création</a>
 
-        <a routerLinkActive="active" routerLink="scriptmanagement" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Gestionnaire</a>
+        <a routerLinkActive="active" routerLink="scriptmanagement" class="btn-gray-simple">Gestionnaire</a>
 
-        <button (click)="applyResetDatabase()" class="text-white bg-orange-400 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium hover:animate-pulse">MAJ BDD</button>
+        <button (click)="applyResetDatabase()" class="btn-orange-simple">MAJ BDD</button>
-
-        <button (click)="testreset()" class="text-white bg-orange-400 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium hover:animate-pulse">Test</button>
 
         <mat-spinner *ngIf="isLoading" diameter="30"></mat-spinner>
       </div>

src/app/search/request-page/request-page.component.html

@@ -1,4 +1,4 @@
-<button class="flex bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow my-2" (click)="refreshEverything()">Réinitialiser</button>
+<button class="flex btn-white-simple my-2" (click)="refreshEverything()">Réinitialiser</button>
 
 <div class="max-w-full rounded-2xl overflow-hidden shadow-lg bg-white">
   <mat-vertical-stepper class="text-white" [linear]="true">
@@ -16,7 +16,7 @@
           <option *ngFor="let schema of schemasByTable | filter : filterSchema" [ngValue]="schema">{{ schema.nameSchema }}</option>
         </select>
 
-        <button class="bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow" matStepperNext>Continuer</button>
+        <button class="btn-white-simple" matStepperNext>Continuer</button>
       </div>
     </mat-step>
 
@@ -34,8 +34,8 @@
           <option *ngFor="let table of tablesBySchema | filter : filterTable" id="{{ table.id }}" [ngValue]="table">{{ table.nameTable }}</option>
         </select>
 
-        <button class="bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow mr-2 mb-2" matStepperPrevious>Retour</button>
+        <button class="btn-white-simple mr-2 mb-2" matStepperPrevious>Retour</button>
-        <button class="bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow" matStepperNext>Continuer</button>
+        <button class="btn-white-simple" matStepperNext>Continuer</button>
       </div>
     </mat-step>
 
@@ -43,7 +43,7 @@
       <div class="my-2">
 
           <label class="text-black mb-4">Colonnes : </label>
-          <button class="flex bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow my-2" (click)="resetColumnsInformations()">Reset</button>
+          <button class="flex btn-white-simple my-2" (click)="resetColumnsInformations()">Reset</button>
 
 
         <input type="text" class="block w-full my-2 pl-2 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-slate-800 focus:border-slate-800" [(ngModel)]="filterColumn" placeholder="Rechercher...">
@@ -52,7 +52,7 @@
           <option *ngFor="let column of infoColumn | filter: filterColumn" id="{{ column.id }}" value="{{ column.id }}">{{ column.nameColumn }} ({{ column.columnText }})</option>
         </select>
 
-        <button class="bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow mr-2 mb-2" matStepperPrevious>Retour</button>
+        <button class="btn-white-simple mr-2 mb-2" matStepperPrevious>Retour</button>
        </div>
     </mat-step>
   </mat-vertical-stepper>

src/assets/button.scss

@@ -0,0 +1,51 @@
+
+@layer components {
+
+  .btn-white-simple {
+    @apply bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow;
+  }
+
+  .btn-gray-simple {
+    @apply text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium;
+  }
+
+  .btn-orange-simple {
+    @apply text-white bg-orange-400 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium hover:animate-pulse;
+  }
+
+  .btn-grad-red-rose {
+    @apply text-gray-900 text-lg bg-gradient-to-br from-rose-600 to-red-400 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-red-200 font-medium rounded-full px-5 py-2.5 text-center;
+  }
+
+  .btn-grad-green-teal {
+    @apply text-white text-lg bg-gradient-to-br from-teal-400 to-green-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-green-200 font-medium rounded-full px-5 py-2.5 text-center;
+  }
+
+  .btn-grad-pink-orange {
+    @apply text-white bg-gradient-to-br from-pink-500 to-orange-400 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-pink-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center;
+  }
+
+  .btn-grad-red-yellow {
+    @apply text-gray-900 bg-gradient-to-r from-red-200 via-red-300 to-yellow-200 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-red-100 font-medium rounded-lg text-sm px-5 py-2.5 text-center;
+  }
+
+  .btn-grad-green-blue {
+    @apply text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-green-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center;
+  }
+
+  .btn-grad-cyon-blue {
+    @apply text-white bg-gradient-to-r from-cyan-500 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-cyan-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center;
+  }
+
+  .btn-grad-purple-blue {
+    @apply text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium py-2.5 px-5 rounded-lg text-sm text-center;
+  }
+
+  .btn-grad-teal-lime {
+    @apply text-black bg-gradient-to-r from-teal-200 to-lime-200 hover:bg-gradient-to-l hover:from-teal-200 hover:to-lime-200 focus:ring-4 focus:outline-none focus:ring-lime-200 font-medium py-2.5 px-5 rounded-lg text-center;
+  }
+
+  .btn-grad-purple-pink {
+    @apply text-white bg-gradient-to-r from-purple-500 to-pink-500 hover:bg-gradient-to-l focus:ring-4 focus:outline-none focus:ring-purple-200 font-semibold py-2 px-4 rounded text-center;
+  }
+}

src/styles.scss

@@ -5,6 +5,8 @@
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
 
+@import 'assets/button.scss';
+
 
 
 html, body { height: 100%; }