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

Chore: Upgraded some packages

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

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

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

@@ -1,30 +1,18 @@
-<div fxLayout="row" fxFlex="50%" fxLayoutAlign="space-around center" class="example-card">
-  <mat-card fxFlex>
+<div class="flex flex-auto flex-row justify-around content-center items-center lg:max-w-[50%]">
+  <mat-card class="flex-auto">
     <mat-card-title-group>
       <mat-card-title>User</mat-card-title>
     </mat-card-title-group>
     <mat-card-content>
-      <form [formGroup]="form" fxLayout="column">
-        <div
-          fxLayout="row"
-          fxLayoutAlign="space-around start"
-          fxLayout.lt-md="column"
-          fxLayoutGap="20px"
-          fxLayoutGap.lt-md="0px"
-        >
-          <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-label>Name</mat-label>
             <input matInput #nameElement placeholder="Name" formControlName="name" />
           </mat-form-field>
         </div>
-        <div
-          fxLayout="row"
-          fxLayoutAlign="space-around start"
-          fxLayout.lt-md="column"
-          fxLayoutGap="20px"
-          fxLayoutGap.lt-md="0px"
-        >
-          <mat-form-field fxFlex>
+        <div class="flex flex-row justify-around content-start items-start">
+          <mat-form-field class="flex-auto">
             <mat-label>Password</mat-label>
             <input
               matInput
@@ -37,28 +25,17 @@
             }}</mat-icon>
           </mat-form-field>
         </div>
-        <div
-          fxLayout="row"
-          fxLayoutAlign="space-around start"
-          fxLayout.lt-md="column"
-          fxLayoutGap="20px"
-          fxLayoutGap.lt-md="0px"
-        >
-          <mat-checkbox formControlName="lockedOut">Is Locked Out?</mat-checkbox>
+        <div class="flex flex-row justify-around content-start items-start">
+          <mat-checkbox formControlName="lockedOut" class="flex-auto">Is Locked Out?</mat-checkbox>
         </div>
         <mat-divider></mat-divider>
         <div formArrayName="roles">
           <div
-            fxLayout="row"
             *ngFor="let r of item.roles; index as i"
             [formGroupName]="i"
-            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"
           >
-            <mat-checkbox formControlName="role" fxFlex>{{ r.name }}</mat-checkbox>
+            <mat-checkbox formControlName="role" class="flex-auto">{{ r.name }}</mat-checkbox>
           </div>
         </div>
       </form>

overlord/src/app/user/user.module.ts

@@ -1,7 +1,6 @@
 import { CdkTableModule } from '@angular/cdk/table';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
@@ -24,7 +23,6 @@ import { UserRoutingModule } from './user-routing.module';
   imports: [
     CommonModule,
     CdkTableModule,
-    FlexLayoutModule,
     MatButtonModule,
     MatCardModule,
     MatCheckboxModule,