Chore: Removed @angular/flex-layout and replaced it with tailwind.

Chore: Upgraded some packages

overlord/src/app/recipe/recipe-detail/recipe-detail.component.css

@@ -1,3 +0,0 @@
-.example-card {
-  max-width: 400px;
-}

overlord/src/app/recipe/recipe-detail/recipe-detail.component.html

@@ -3,15 +3,9 @@
     <mat-card-title>Recipe Detail</mat-card-title>
   </mat-card-title-group>
   <mat-card-content>
-    <form [formGroup]="form" fxLayout="column">
-      <div
-        fxLayout="row"
-        fxLayout.lt-md="column"
-        fxLayoutGap="20px"
-        fxLayoutGap.lt-md="0px"
-        fxLayoutAlign="space-around start"
-      >
-        <mat-form-field fxFlex>
+    <form [formGroup]="form" class="flex flex-col">
+      <div class="flex flex-row justify-around content-start items-start">
+        <mat-form-field class="flex-auto">
           <mat-select formControlName="period">
             <mat-option *ngFor="let p of periods" [value]="p">
               {{ p.validFrom }} to {{ p.validTill }}
@@ -19,8 +13,8 @@
           </mat-select>
         </mat-form-field>
       </div>
-      <div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px" fxLayoutGap.lt-md="0px">
-        <mat-form-field fxFlex="60">
+      <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
+        <mat-form-field class="flex-auto basis-3/5 mr-5">
           <input
             type="text"
             matInput
@@ -41,7 +35,7 @@
             }}</mat-option>
           </mat-autocomplete>
         </mat-form-field>
-        <mat-form-field fxFlex="10">
+        <mat-form-field class="flex-auto basis-1/10 mr-5">
           <mat-label>Yield</mat-label>
           <input
             type="text"
@@ -51,7 +45,7 @@
             autocomplete="off"
           />
         </mat-form-field>
-        <mat-form-field fxFlex="10">
+        <mat-form-field class="flex-auto basis-1/10 mr-5">
           <mat-label>Sale Price</mat-label>
           <span matPrefix>₹ </span>
           <input
@@ -62,7 +56,7 @@
             autocomplete="off"
           />
         </mat-form-field>
-        <mat-form-field fxFlex="10">
+        <mat-form-field class="flex-auto basis-1/10 mr-5">
           <mat-label>Cost Price</mat-label>
           <span matPrefix>₹ </span>
           <input
@@ -73,7 +67,7 @@
             autocomplete="off"
           />
         </mat-form-field>
-        <mat-form-field fxFlex="10">
+        <mat-form-field class="flex-auto basis-1/10">
           <mat-label>Cost Percentage</mat-label>
           <input
             type="text"
@@ -87,13 +81,9 @@
       </div>
       <div
         formGroupName="addRow"
-        fxLayout="row"
-        fxLayoutAlign="space-around start"
-        fxLayout.lt-md="column"
-        fxLayoutGap="20px"
-        fxLayoutGap.lt-md="0px"
+        class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col"
       >
-        <mat-form-field fxFlex="50">
+        <mat-form-field class="flex-auto basis-1/2 mr-5">
           <input
             type="text"
             matInput
@@ -114,7 +104,7 @@
             >
           </mat-autocomplete>
         </mat-form-field>
-        <mat-form-field fxFlex="20">
+        <mat-form-field class="flex-auto basis-1/5 mr-5">
           <mat-label>Quantity</mat-label>
           <input
             type="text"
@@ -124,7 +114,7 @@
             autocomplete="off"
           />
         </mat-form-field>
-        <mat-form-field fxFlex="20">
+        <mat-form-field class="flex-auto basis-1/5 mr-5">
           <mat-label>Rate</mat-label>
           <span matPrefix>₹ </span>
           <input
@@ -136,7 +126,9 @@
           />
         </mat-form-field>
 
-        <button mat-raised-button color="primary" (click)="addRow()" fxFlex="15">Add</button>
+        <button mat-raised-button color="primary" (click)="addRow()" class="flex-auto basis-1/10">
+          Add
+        </button>
       </div>
       <mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
         <!-- Ingredient Column -->