From 379036123f4422b6ef024c1f3f75093168cb42f4 Mon Sep 17 00:00:00 2001
From: Oscar Hinton <Hinton@users.noreply.github.com>
Date: Tue, 2 Aug 2022 08:45:59 +0200
Subject: [PATCH] [SM-110] Add prettier-plugin-tailwindcss (#3215)

---
 .../organization-switcher.component.html      | 10 ++++----
 .../web/src/app/layouts/navbar.component.html |  6 ++---
 .../register-form.component.html              | 10 ++++----
 .../trial-initiation/billing.component.html   | 10 ++++----
 .../enterprise-content.component.html         |  2 +-
 .../families-content.component.html           |  2 +-
 .../teams-content.component.html              |  2 +-
 .../trial-initiation.component.html           | 18 +++++++-------
 .../organization-options.component.html       | 10 ++++----
 .../vertical-step-content.component.html      | 18 +++++++-------
 .../vertical-step.component.html              |  2 +-
 .../vertical-stepper.component.html           |  4 ++--
 .../app/reports/report-card.component.html    |  6 ++---
 .../src/app/sm/layout/layout.component.html   |  4 ++--
 .../src/banner/banner.component.html          |  6 ++---
 .../src/callout/callout.component.html        |  2 +-
 .../src/form-field/form-field.component.html  |  2 +-
 .../src/menu/menu-divider.component.html      |  2 +-
 libs/components/src/menu/menu.component.html  |  2 +-
 .../src/modal/modal-simple.component.html     | 10 ++++----
 .../components/src/modal/modal.component.html | 10 ++++----
 .../components/src/stories/colors.stories.mdx |  2 +-
 .../components/src/table/table.component.html |  4 ++--
 .../src/tabs/tab-group.component.html         |  2 +-
 package-lock.json                             | 24 +++++++++++++++++--
 package.json                                  |  3 ++-
 26 files changed, 97 insertions(+), 76 deletions(-)

diff --git a/apps/web/src/app/components/organization-switcher.component.html b/apps/web/src/app/components/organization-switcher.component.html
index 221985a6cff..cd003ae247e 100644
--- a/apps/web/src/app/components/organization-switcher.component.html
+++ b/apps/web/src/app/components/organization-switcher.component.html
@@ -1,6 +1,6 @@
 <div *ngIf="loaded && activeOrganization != null" class="tw-flex">
   <button
-    class="tw-flex tw-items-center tw-bg-background-alt tw-border-none"
+    class="tw-flex tw-items-center tw-border-none tw-bg-background-alt"
     type="button"
     id="pickerButton"
     [appA11yTitle]="'organizationPicker' | i18n"
@@ -24,7 +24,7 @@
   </button>
   <div>
     <div
-      class="tw-ml-3 tw-border tw-border-solid tw-rounded tw-border-danger-500 tw-text-danger"
+      class="tw-ml-3 tw-rounded tw-border tw-border-solid tw-border-danger-500 tw-text-danger"
       *ngIf="!activeOrganization.enabled"
     >
       <div class="tw-py-2 tw-px-5">
@@ -33,7 +33,7 @@
       </div>
     </div>
     <div
-      class="tw-ml-3 tw-border tw-border-solid tw-rounded tw-border-info-500 tw-text-info"
+      class="tw-ml-3 tw-rounded tw-border tw-border-solid tw-border-info-500 tw-text-info"
       *ngIf="activeOrganization.isProviderUser"
     >
       <div class="tw-py-2 tw-px-5">
@@ -44,8 +44,8 @@
   </div>
 
   <bit-menu #orgPickerMenu>
-    <ul aria-labelledby="pickerButton" class="tw-p-0 tw-m-0">
-      <li *ngFor="let org of organizations" class="tw-list-none tw-flex tw-flex-col" role="none">
+    <ul aria-labelledby="pickerButton" class="tw-m-0 tw-p-0">
+      <li *ngFor="let org of organizations" class="tw-flex tw-list-none tw-flex-col" role="none">
         <a bitMenuItem [routerLink]="['/organizations', org.id]">
           <i
             class="bwi bwi-check mr-2"
diff --git a/apps/web/src/app/layouts/navbar.component.html b/apps/web/src/app/layouts/navbar.component.html
index edc5d34d69a..ee428cb5ee8 100644
--- a/apps/web/src/app/layouts/navbar.component.html
+++ b/apps/web/src/app/layouts/navbar.component.html
@@ -44,9 +44,9 @@
           <i class="bwi bwi-caret-down bwi-sm" aria-hidden="true"></i>
         </button>
         <bit-menu class="dropdown-menu" #accountMenu>
-          <div class="tw-max-w-[300px] tw-min-w-[200px] tw-flex tw-flex-col">
+          <div class="tw-flex tw-min-w-[200px] tw-max-w-[300px] tw-flex-col">
             <div
-              class="tw-flex tw-items-center tw-leading-tight tw-text-info tw-py-1 tw-px-4"
+              class="tw-flex tw-items-center tw-py-1 tw-px-4 tw-leading-tight tw-text-info"
               *ngIf="name"
               appStopProp
             >
@@ -59,7 +59,7 @@
               ></app-avatar>
               <div class="tw-ml-2 tw-block tw-overflow-hidden tw-whitespace-nowrap">
                 <span>{{ "loggedInAs" | i18n }}</span>
-                <small class="tw-text-muted tw-block tw-overflow-hidden tw-whitespace-nowrap">{{
+                <small class="tw-block tw-overflow-hidden tw-whitespace-nowrap tw-text-muted">{{
                   name
                 }}</small>
               </div>
diff --git a/apps/web/src/app/modules/register-form/register-form.component.html b/apps/web/src/app/modules/register-form/register-form.component.html
index 951fa9b34e6..e147f463cb6 100644
--- a/apps/web/src/app/modules/register-form/register-form.component.html
+++ b/apps/web/src/app/modules/register-form/register-form.component.html
@@ -90,11 +90,11 @@
       <iframe id="hcaptcha_iframe" height="80"></iframe>
     </div>
 
-    <div class="tw-flex tw-items-start tw-mb-3" *ngIf="showTerms">
-      <div class="tw-flex tw-items-center tw-h-6">
+    <div class="tw-mb-3 tw-flex tw-items-start" *ngIf="showTerms">
+      <div class="tw-flex tw-h-6 tw-items-center">
         <input
           id="register-form_input_accept-policies"
-          class="tw-w-4 tw-rounded tw-border tw-border-gray-300"
+          class="tw-border-gray-300 tw-w-4 tw-rounded tw-border"
           bitInput
           type="checkbox"
           formControlName="acceptPolicies"
@@ -112,13 +112,13 @@
       </bit-label>
     </div>
 
-    <div class="tw-flex tw-mb-3">
+    <div class="tw-mb-3 tw-flex">
       <bit-submit-button [loading]="form.loading">{{ "createAccount" | i18n }}</bit-submit-button>
       <a
         bitButton
         buttonType="secondary"
         routerLink="/login"
-        class="tw-inline-flex tw-items-center tw-ml-3 tw-px-3"
+        class="tw-ml-3 tw-inline-flex tw-items-center tw-px-3"
       >
         <i class="bwi bwi-sign-in tw-mr-2"></i>
         {{ "logIn" | i18n }}
diff --git a/apps/web/src/app/modules/trial-initiation/billing.component.html b/apps/web/src/app/modules/trial-initiation/billing.component.html
index 949220bad51..4486d0672dd 100644
--- a/apps/web/src/app/modules/trial-initiation/billing.component.html
+++ b/apps/web/src/app/modules/trial-initiation/billing.component.html
@@ -1,12 +1,12 @@
 <form #form [formGroup]="formGroup" [appApiAction]="formPromise" (ngSubmit)="submit()">
   <div class="tw-container tw-mb-3">
     <div class="tw-mb-6">
-      <h2 class="tw-text-base tw-font-semibold tw-mb-3">{{ "billingPlanLabel" | i18n }}</h2>
-      <div class="tw-items-center tw-mb-1" *ngFor="let selectablePlan of selectablePlans">
-        <label class="tw-block tw- tw-text-main" for="interval{{ selectablePlan.type }}">
+      <h2 class="tw-mb-3 tw-text-base tw-font-semibold">{{ "billingPlanLabel" | i18n }}</h2>
+      <div class="tw-mb-1 tw-items-center" *ngFor="let selectablePlan of selectablePlans">
+        <label class="tw- tw-block tw-text-main" for="interval{{ selectablePlan.type }}">
           <input
             checked
-            class="tw-w-4 tw-h-4 tw-align-middle"
+            class="tw-h-4 tw-w-4 tw-align-middle"
             id="interval{{ selectablePlan.type }}"
             name="plan"
             type="radio"
@@ -34,7 +34,7 @@
     </div>
 
     <div class="tw-mb-4">
-      <h2 class="tw-text-base tw-mb-3 tw-font-semibold">{{ "paymentType" | i18n }}</h2>
+      <h2 class="tw-mb-3 tw-text-base tw-font-semibold">{{ "paymentType" | i18n }}</h2>
       <app-payment [hideCredit]="true" [trialFlow]="true"></app-payment>
       <app-tax-info [trialFlow]="true" (onCountryChanged)="changedCountry()"></app-tax-info>
     </div>
diff --git a/apps/web/src/app/modules/trial-initiation/enterprise-content.component.html b/apps/web/src/app/modules/trial-initiation/enterprise-content.component.html
index 2da9a72cab1..239c25fdc91 100644
--- a/apps/web/src/app/modules/trial-initiation/enterprise-content.component.html
+++ b/apps/web/src/app/modules/trial-initiation/enterprise-content.component.html
@@ -3,7 +3,7 @@
   <h2>What you can do with Bitwarden for Enterprise</h2>
 </div>
 
-<div class="tw-text-3xl tw-text-main tw-mt-12">
+<div class="tw-mt-12 tw-text-3xl tw-text-main">
   <p class="tw-mt-2.5 tw-mb-20">Collaborate and share securely</p>
   <p class="tw-mt-2.5 tw-mb-20">Deploy and manage quickly and easily</p>
   <p class="tw-mt-2.5 tw-mb-20">Access anywhere on any device</p>
diff --git a/apps/web/src/app/modules/trial-initiation/families-content.component.html b/apps/web/src/app/modules/trial-initiation/families-content.component.html
index d2fc304e9e1..c0c6af0be00 100644
--- a/apps/web/src/app/modules/trial-initiation/families-content.component.html
+++ b/apps/web/src/app/modules/trial-initiation/families-content.component.html
@@ -5,7 +5,7 @@
     storage and sharing.
   </h2>
 </div>
-<div class="tw-text-3xl tw-text-main tw-mt-12">
+<div class="tw-mt-12 tw-text-3xl tw-text-main">
   <p class="tw-mt-2.5 tw-mb-20">Collaborate and share securely</p>
   <p class="tw-mt-2.5 tw-mb-20">Deploy and manage quickly and easily</p>
   <p class="tw-mt-2.5 tw-mb-20">Access anywhere on any device</p>
diff --git a/apps/web/src/app/modules/trial-initiation/teams-content.component.html b/apps/web/src/app/modules/trial-initiation/teams-content.component.html
index 6183618dee8..20e547fef13 100644
--- a/apps/web/src/app/modules/trial-initiation/teams-content.component.html
+++ b/apps/web/src/app/modules/trial-initiation/teams-content.component.html
@@ -2,7 +2,7 @@
 <div class="tw-pt-24">
   <h2>What you can do with Btiwarden for Teams</h2>
 </div>
-<div class="tw-text-3xl tw-text-main tw-mt-12">
+<div class="tw-mt-12 tw-text-3xl tw-text-main">
   <p class="tw-mt-2.5 tw-mb-20">Collaborate and share securely</p>
   <p class="tw-mt-2.5 tw-mb-20">Deploy and manage quickly and easily</p>
   <p class="tw-mt-2.5 tw-mb-20">Access anywhere on any device</p>
diff --git a/apps/web/src/app/modules/trial-initiation/trial-initiation.component.html b/apps/web/src/app/modules/trial-initiation/trial-initiation.component.html
index b0d647b68bf..c51a1b0277b 100644
--- a/apps/web/src/app/modules/trial-initiation/trial-initiation.component.html
+++ b/apps/web/src/app/modules/trial-initiation/trial-initiation.component.html
@@ -1,7 +1,7 @@
 <div *ngIf="accountCreateOnly" class="">
-  <h1 class="tw-text-xl tw-text-center tw-mt-12" *ngIf="!layout">{{ "createAccount" | i18n }}</h1>
+  <h1 class="tw-mt-12 tw-text-center tw-text-xl" *ngIf="!layout">{{ "createAccount" | i18n }}</h1>
   <div
-    class="tw-m-auto tw-rounded tw-border tw-border-solid tw-bg-background tw-border-secondary-300 tw-min-w-xl tw-max-w-xl tw-p-8"
+    class="tw-min-w-xl tw-m-auto tw-max-w-xl tw-rounded tw-border tw-border-solid tw-border-secondary-300 tw-bg-background tw-p-8"
   >
     <app-register-form
       [queryParamEmail]="email"
@@ -11,9 +11,9 @@
 </div>
 <div *ngIf="!accountCreateOnly">
   <div
-    class="tw-bg-background-alt2 tw-h-96 tw--mt-48 tw-absolute tw--skew-y-3 tw-w-full tw--z-10"
+    class="tw-absolute tw--z-10 tw--mt-48 tw-h-96 tw-w-full tw--skew-y-3 tw-bg-background-alt2"
   ></div>
-  <div class="tw-flex tw-max-w-screen-xl tw-min-w-4xl tw-mx-auto tw-px-4">
+  <div class="tw-min-w-4xl tw-mx-auto tw-flex tw-max-w-screen-xl tw-px-4">
     <div class="tw-w-1/2">
       <img
         alt="Bitwarden"
@@ -33,9 +33,9 @@
     </div>
     <div class="tw-w-1/2">
       <div class="tw-pt-56">
-        <div class="tw-rounded tw-border tw-border-solid tw-bg-background tw-border-secondary-300">
-          <div class="tw-h-12 tw-flex tw-items-center tw-rounded-t tw-bg-secondary-100 tw-w-full">
-            <h2 class="tw-uppercase tw-pl-4 tw-text-base tw-mb-0 tw-font-bold">
+        <div class="tw-rounded tw-border tw-border-solid tw-border-secondary-300 tw-bg-background">
+          <div class="tw-flex tw-h-12 tw-w-full tw-items-center tw-rounded-t tw-bg-secondary-100">
+            <h2 class="tw-mb-0 tw-pl-4 tw-text-base tw-font-bold tw-uppercase">
               Start your 7-Day free trial of Bitwarden for {{ org }}
             </h2>
           </div>
@@ -72,7 +72,7 @@
                 [email]="email"
                 [orgLabel]="orgLabel"
               ></app-trial-confirmation-details>
-              <div class="tw-flex tw-mb-3">
+              <div class="tw-mb-3 tw-flex">
                 <button bitButton buttonType="primary" (click)="navigateToOrgVault()">
                   Get Started
                 </button>
@@ -80,7 +80,7 @@
                   bitButton
                   buttonType="secondary"
                   (click)="navigateToOrgInvite()"
-                  class="tw-inline-flex tw-items-center tw-ml-3 tw-px-3"
+                  class="tw-ml-3 tw-inline-flex tw-items-center tw-px-3"
                 >
                   Invite Users
                 </button>
diff --git a/apps/web/src/app/modules/vault-filter/components/organization-options.component.html b/apps/web/src/app/modules/vault-filter/components/organization-options.component.html
index cbddbd30b24..82ec2a41f07 100644
--- a/apps/web/src/app/modules/vault-filter/components/organization-options.component.html
+++ b/apps/web/src/app/modules/vault-filter/components/organization-options.component.html
@@ -8,12 +8,12 @@
 </ng-container>
 <div
   *ngIf="loaded"
-  class="tw-max-w-[300px] tw-min-w-[200px] tw-flex tw-flex-col"
+  class="tw-flex tw-min-w-[200px] tw-max-w-[300px] tw-flex-col"
   [appApiAction]="actionPromise"
 >
   <button
     *ngIf="allowEnrollmentChanges(organization) && !organization.resetPasswordEnrolled"
-    class="!tw-text-main active:!tw-ring-0 active:!tw-ring-offset-0 focus:tw-bg-secondary-100 focus:tw-outline-none focus:tw-ring focus:tw-ring-offset-2 focus:tw-ring-primary-700 focus:tw-z-50 hover:tw-bg-secondary-100 tw-bg-background tw-block tw-border-none tw-cursor-pointer tw-px-4 tw-py-2 tw-text-left"
+    class="tw-block tw-cursor-pointer tw-border-none tw-bg-background tw-px-4 tw-py-2 tw-text-left !tw-text-main hover:tw-bg-secondary-100 focus:tw-z-50 focus:tw-bg-secondary-100 focus:tw-outline-none focus:tw-ring focus:tw-ring-primary-700 focus:tw-ring-offset-2 active:!tw-ring-0 active:!tw-ring-offset-0"
     (click)="toggleResetPasswordEnrollment(organization)"
   >
     <i class="bwi bwi-fw bwi-key" aria-hidden="true"></i>
@@ -21,7 +21,7 @@
   </button>
   <button
     *ngIf="allowEnrollmentChanges(organization) && organization.resetPasswordEnrolled"
-    class="!tw-text-main active:!tw-ring-0 active:!tw-ring-offset-0 focus:tw-bg-secondary-100 focus:tw-outline-none focus:tw-ring focus:tw-ring-offset-2 focus:tw-ring-primary-700 focus:tw-z-50 hover:tw-bg-secondary-100 tw-bg-background tw-block tw-border-none tw-cursor-pointer tw-px-4 tw-py-2 tw-text-left"
+    class="tw-block tw-cursor-pointer tw-border-none tw-bg-background tw-px-4 tw-py-2 tw-text-left !tw-text-main hover:tw-bg-secondary-100 focus:tw-z-50 focus:tw-bg-secondary-100 focus:tw-outline-none focus:tw-ring focus:tw-ring-primary-700 focus:tw-ring-offset-2 active:!tw-ring-0 active:!tw-ring-offset-0"
     (click)="toggleResetPasswordEnrollment(organization)"
   >
     <i class="bwi bwi-fw bwi-undo" aria-hidden="true"></i>
@@ -30,7 +30,7 @@
   <ng-container *ngIf="organization.useSso && organization.identifier">
     <button
       *ngIf="organization.ssoBound; else linkSso"
-      class="!tw-text-main active:!tw-ring-0 active:!tw-ring-offset-0 focus:tw-bg-secondary-100 focus:tw-outline-none focus:tw-ring focus:tw-ring-offset-2 focus:tw-ring-primary-700 focus:tw-z-50 hover:tw-bg-secondary-100 tw-bg-background tw-block tw-border-none tw-cursor-pointer tw-px-4 tw-py-2 tw-text-left"
+      class="tw-block tw-cursor-pointer tw-border-none tw-bg-background tw-px-4 tw-py-2 tw-text-left !tw-text-main hover:tw-bg-secondary-100 focus:tw-z-50 focus:tw-bg-secondary-100 focus:tw-outline-none focus:tw-ring focus:tw-ring-primary-700 focus:tw-ring-offset-2 active:!tw-ring-0 active:!tw-ring-offset-0"
       (click)="unlinkSso(organization)"
     >
       <i class="bwi bwi-fw bwi-chain-broken" aria-hidden="true"></i>
@@ -41,7 +41,7 @@
     </ng-template>
   </ng-container>
   <button
-    class="text-danger active:!tw-ring-0 active:!tw-ring-offset-0 focus:tw-bg-secondary-100 focus:tw-outline-none focus:tw-ring focus:tw-ring-offset-2 focus:tw-ring-primary-700 focus:tw-z-50 hover:tw-bg-secondary-100 tw-bg-background tw-block tw-border-none tw-cursor-pointer tw-px-4 tw-py-2 tw-text-left"
+    class="text-danger tw-block tw-cursor-pointer tw-border-none tw-bg-background tw-px-4 tw-py-2 tw-text-left hover:tw-bg-secondary-100 focus:tw-z-50 focus:tw-bg-secondary-100 focus:tw-outline-none focus:tw-ring focus:tw-ring-primary-700 focus:tw-ring-offset-2 active:!tw-ring-0 active:!tw-ring-offset-0"
     (click)="leave(organization)"
   >
     <i class="bwi bwi-fw bwi-sign-out" aria-hidden="true"></i>
diff --git a/apps/web/src/app/modules/vertical-stepper/vertical-step-content.component.html b/apps/web/src/app/modules/vertical-stepper/vertical-step-content.component.html
index 91e214097db..21804c26016 100644
--- a/apps/web/src/app/modules/vertical-stepper/vertical-step-content.component.html
+++ b/apps/web/src/app/modules/vertical-stepper/vertical-step-content.component.html
@@ -1,38 +1,38 @@
-<div class="tw-m-2.5 tw-text-center tw-h-16">
+<div class="tw-m-2.5 tw-h-16 tw-text-center">
   <button
     (click)="selectStep()"
     [disabled]="disabled"
-    class="tw-w-full tw-flex tw-border-none tw-bg-transparent tw-items-center"
+    class="tw-flex tw-w-full tw-items-center tw-border-none tw-bg-transparent"
     [ngClass]="{
       'hover:tw-bg-secondary-100': !disabled && step.editable
     }"
     [attr.aria-expanded]="selected"
   >
     <span
-      class="tw-rounded-full tw-font-bold tw-leading-9 tw-mr-3.5 tw-w-9"
+      class="tw-mr-3.5 tw-w-9 tw-rounded-full tw-font-bold tw-leading-9"
       *ngIf="!step.completed"
       [ngClass]="{
-        'tw-text-contrast tw-bg-primary-500': selected,
-        'tw-text-main tw-bg-secondary-300': !selected && !disabled && step.editable,
-        'tw-text-muted tw-bg-transparent': disabled
+        'tw-bg-primary-500 tw-text-contrast': selected,
+        'tw-bg-secondary-300 tw-text-main': !selected && !disabled && step.editable,
+        'tw-bg-transparent tw-text-muted': disabled
       }"
     >
       {{ stepNumber }}
     </span>
     <span
-      class="tw-text-contrast tw-bg-primary-500 tw-rounded-full tw-font-bold tw-leading-9 tw-mr-3.5 tw-w-9"
+      class="tw-mr-3.5 tw-w-9 tw-rounded-full tw-bg-primary-500 tw-font-bold tw-leading-9 tw-text-contrast"
       *ngIf="step.completed"
     >
       <i class="bwi bwi-fw bwi-check tw-p-1" aria-hidden="true"></i>
     </span>
     <div
-      class="tw-text-left tw-txt-main tw-leading-snug tw-h-12 tw-mt-3.5"
+      class="tw-txt-main tw-mt-3.5 tw-h-12 tw-text-left tw-leading-snug"
       [ngClass]="{
         'tw-font-bold': selected
       }"
     >
       <p
-        class="main-label text tw-text-main tw-mb-1"
+        class="main-label text tw-mb-1 tw-text-main"
         [ngClass]="{
           'tw-mt-1': !step.subLabel
         }"
diff --git a/apps/web/src/app/modules/vertical-stepper/vertical-step.component.html b/apps/web/src/app/modules/vertical-stepper/vertical-step.component.html
index 60685013dbf..34e3af03a39 100644
--- a/apps/web/src/app/modules/vertical-stepper/vertical-step.component.html
+++ b/apps/web/src/app/modules/vertical-stepper/vertical-step.component.html
@@ -1,6 +1,6 @@
 <ng-template>
   <div
-    class="tw-pl-7 tw-inline-block tw-w-11/12"
+    class="tw-inline-block tw-w-11/12 tw-pl-7"
     [ngClass]="{ 'tw-border-0 tw-border-l tw-border-solid tw-border-secondary-300': applyBorder }"
   >
     <ng-content></ng-content>
diff --git a/apps/web/src/app/modules/vertical-stepper/vertical-stepper.component.html b/apps/web/src/app/modules/vertical-stepper/vertical-stepper.component.html
index 2051cfb47d8..2b7cf005608 100644
--- a/apps/web/src/app/modules/vertical-stepper/vertical-stepper.component.html
+++ b/apps/web/src/app/modules/vertical-stepper/vertical-stepper.component.html
@@ -9,12 +9,12 @@
         (onSelectStep)="selectStepByIndex(i)"
       ></app-vertical-step-content>
       <div
-        class="tw-pl-7 tw-inline-block"
+        class="tw-inline-block tw-pl-7"
         *ngIf="selectedIndex === i"
         [ngTemplateOutlet]="selected ? selected.content : null"
       ></div>
       <div
-        class="tw-h-6 tw-ml-8 tw-border-0 tw-border-l tw-border-solid tw-border-secondary-300"
+        class="tw-ml-8 tw-h-6 tw-border-0 tw-border-l tw-border-solid tw-border-secondary-300"
         *ngIf="!isLast && !(selectedIndex === i)"
       ></div>
     </li>
diff --git a/apps/web/src/app/reports/report-card.component.html b/apps/web/src/app/reports/report-card.component.html
index 7882e27906a..5fddd6c68c9 100644
--- a/apps/web/src/app/reports/report-card.component.html
+++ b/apps/web/src/app/reports/report-card.component.html
@@ -1,17 +1,17 @@
 <a
-  class="tw-border tw-border-solid tw-border-secondary-300 tw-rounded tw-overflow-hidden tw-h-full tw-w-72 tw-block !tw-text-main hover:tw-no-underline hover:tw-scale-105 tw-transition-all focus:tw-outline-none focus:tw-ring focus:tw-ring-offset-2 focus:tw-ring-primary-700"
+  class="tw-block tw-h-full tw-w-72 tw-overflow-hidden tw-rounded tw-border tw-border-solid tw-border-secondary-300 !tw-text-main tw-transition-all hover:tw-scale-105 hover:tw-no-underline focus:tw-outline-none focus:tw-ring focus:tw-ring-primary-700 focus:tw-ring-offset-2"
   [routerLink]="route"
   (click)="click()"
 >
   <div class="tw-relative">
     <div
-      class="tw-text-center tw-h-28 tw-flex tw-bg-background-alt2 tw-text-primary-300"
+      class="tw-flex tw-h-28 tw-bg-background-alt2 tw-text-center tw-text-primary-300"
       [ngClass]="{ 'tw-grayscale': premium }"
     >
       <div class="tw-m-auto" [innerHtml]="icon"></div>
     </div>
     <div class="tw-p-5" [ngClass]="{ 'tw-grayscale': report.requiresPremium }">
-      <h3 class="tw-text-xl tw-font-bold tw-mb-4">{{ report.title | i18n }}</h3>
+      <h3 class="tw-mb-4 tw-text-xl tw-font-bold">{{ report.title | i18n }}</h3>
       <p class="tw-mb-0">{{ report.description | i18n }}</p>
     </div>
     <span
diff --git a/bitwarden_license/bit-web/src/app/sm/layout/layout.component.html b/bitwarden_license/bit-web/src/app/sm/layout/layout.component.html
index 00f8fc2ce84..417272a29fe 100644
--- a/bitwarden_license/bit-web/src/app/sm/layout/layout.component.html
+++ b/bitwarden_license/bit-web/src/app/sm/layout/layout.component.html
@@ -1,8 +1,8 @@
 <div class="tw-flex tw-w-full">
-  <aside class="tw-w-60 tw-bg-background tw-min-h-screen">
+  <aside class="tw-min-h-screen tw-w-60 tw-bg-background">
     <router-outlet name="sidebar"></router-outlet>
   </aside>
-  <main class="tw-flex-1 tw-bg-background-alt tw-min-h-screen tw-px-6 tw-pt-3">
+  <main class="tw-min-h-screen tw-flex-1 tw-bg-background-alt tw-px-6 tw-pt-3">
     <router-outlet></router-outlet>
   </main>
 </div>
diff --git a/libs/components/src/banner/banner.component.html b/libs/components/src/banner/banner.component.html
index eaf91d1d8d0..531682b6407 100644
--- a/libs/components/src/banner/banner.component.html
+++ b/libs/components/src/banner/banner.component.html
@@ -1,14 +1,14 @@
 <div
-  class="tw-py-2.5 tw-px-4 tw-text-contrast tw-flex tw-gap-2 tw-items-center"
+  class="tw-flex tw-items-center tw-gap-2 tw-py-2.5 tw-px-4 tw-text-contrast"
   [ngClass]="bannerClass"
   [attr.role]="useAlertRole ? 'status' : null"
   [attr.aria-live]="useAlertRole ? 'polite' : null"
 >
   <i class="bwi tw-align-middle" [ngClass]="icon" *ngIf="icon" aria-hidden="true"></i>
-  <span class="tw-text-base tw-grow">
+  <span class="tw-grow tw-text-base">
     <ng-content></ng-content>
   </span>
-  <button class="tw-border-0 tw-bg-transparent tw-text-contrast tw-p-0" (click)="onClose.emit()">
+  <button class="tw-border-0 tw-bg-transparent tw-p-0 tw-text-contrast" (click)="onClose.emit()">
     <i class="bwi bwi-close tw-text-sm" *ngIf="icon" aria-hidden="true"></i>
   </button>
 </div>
diff --git a/libs/components/src/callout/callout.component.html b/libs/components/src/callout/callout.component.html
index 8e84612381c..e17ed512b6d 100644
--- a/libs/components/src/callout/callout.component.html
+++ b/libs/components/src/callout/callout.component.html
@@ -1,5 +1,5 @@
 <div
-  class="tw-py-3 tw-px-5 tw-mb-4 tw-leading-5 tw-rounded tw-bg-background-alt tw-border tw-border-secondary-300 tw-border-solid tw-box-border tw-border-l-8 tw-text-main"
+  class="tw-mb-4 tw-box-border tw-rounded tw-border tw-border-l-8 tw-border-solid tw-border-secondary-300 tw-bg-background-alt tw-py-3 tw-px-5 tw-leading-5 tw-text-main"
   [ngClass]="calloutClass"
 >
   <h3
diff --git a/libs/components/src/form-field/form-field.component.html b/libs/components/src/form-field/form-field.component.html
index 10ec4550414..cf638ce1c77 100644
--- a/libs/components/src/form-field/form-field.component.html
+++ b/libs/components/src/form-field/form-field.component.html
@@ -1,4 +1,4 @@
-<label class="tw-block tw-font-semibold tw-mb-1 tw-text-main" [attr.for]="input.id">
+<label class="tw-mb-1 tw-block tw-font-semibold tw-text-main" [attr.for]="input.id">
   <ng-content select="bit-label"></ng-content>
   <span *ngIf="input.required" class="tw-text-xs tw-font-normal"> ({{ "required" | i18n }})</span>
 </label>
diff --git a/libs/components/src/menu/menu-divider.component.html b/libs/components/src/menu/menu-divider.component.html
index 7cc020ef50a..c7c2c739d21 100644
--- a/libs/components/src/menu/menu-divider.component.html
+++ b/libs/components/src/menu/menu-divider.component.html
@@ -1,4 +1,4 @@
 <div
-  class="tw-border-solid tw-border-0 tw-border-t tw-border-t-secondary-500 tw-my-2"
+  class="tw-my-2 tw-border-0 tw-border-t tw-border-solid tw-border-t-secondary-500"
   role="separator"
 ></div>
diff --git a/libs/components/src/menu/menu.component.html b/libs/components/src/menu/menu.component.html
index 8123c7be408..303f4fa5432 100644
--- a/libs/components/src/menu/menu.component.html
+++ b/libs/components/src/menu/menu.component.html
@@ -1,7 +1,7 @@
 <ng-template>
   <div
     (click)="closed.emit()"
-    class="tw-flex tw-flex-col tw-bg-background tw-border tw-border-solid tw-rounded tw-border-secondary-500 tw-bg-clip-padding tw-py-2 tw-shrink-0"
+    class="tw-flex tw-shrink-0 tw-flex-col tw-rounded tw-border tw-border-solid tw-border-secondary-500 tw-bg-background tw-bg-clip-padding tw-py-2"
     role="menu"
   >
     <ng-content></ng-content>
diff --git a/libs/components/src/modal/modal-simple.component.html b/libs/components/src/modal/modal-simple.component.html
index f60d2e3e338..e4ff97d5ba5 100644
--- a/libs/components/src/modal/modal-simple.component.html
+++ b/libs/components/src/modal/modal-simple.component.html
@@ -1,19 +1,19 @@
 <div
-  class="tw-max-w-sm tw-max-h-screen tw-my-4 tw-flex tw-flex-col tw-bg-text-contrast tw-border tw-border-solid tw-border-secondary-300 tw-rounded tw-text-main tw-overflow-hidden"
+  class="tw-my-4 tw-flex tw-max-h-screen tw-max-w-sm tw-flex-col tw-overflow-hidden tw-rounded tw-border tw-border-solid tw-border-secondary-300 tw-bg-text-contrast tw-text-main"
 >
-  <div class="tw-text-center tw-flex tw-flex-col tw-items-center tw-px-4 tw-pt-4 tw-gap-2">
+  <div class="tw-flex tw-flex-col tw-items-center tw-gap-2 tw-px-4 tw-pt-4 tw-text-center">
     <ng-content *ngIf="hasIcon; else elseBlock" select="[bit-modal-icon]"></ng-content>
     <ng-template #elseBlock>
       <i class="bwi bwi-exclamation-triangle tw-text-3xl tw-text-warning" aria-hidden="true"></i>
     </ng-template>
-    <h2 class="tw-font-semibold tw-text-base tw-mb-0">
+    <h2 class="tw-mb-0 tw-text-base tw-font-semibold">
       <ng-content select="[bit-modal-title]"></ng-content>
     </h2>
   </div>
-  <div class="tw-text-center tw-text-base tw-pt-2 tw-pb-4 tw-px-4 tw-overflow-y-auto">
+  <div class="tw-overflow-y-auto tw-px-4 tw-pt-2 tw-pb-4 tw-text-center tw-text-base">
     <ng-content select="[bit-modal-content]"></ng-content>
   </div>
-  <div class="tw-p-4 tw-border-solid tw-border-secondary-300 tw-border-0 tw-border-t">
+  <div class="tw-border-0 tw-border-t tw-border-solid tw-border-secondary-300 tw-p-4">
     <ng-content select="[bit-modal-footer]"></ng-content>
   </div>
 </div>
diff --git a/libs/components/src/modal/modal.component.html b/libs/components/src/modal/modal.component.html
index e6d0fb50011..a4528a4a0eb 100644
--- a/libs/components/src/modal/modal.component.html
+++ b/libs/components/src/modal/modal.component.html
@@ -1,11 +1,11 @@
 <div
   [ngClass]="width"
-  class="tw-max-h-screen tw-my-4 tw-flex tw-flex-col tw-bg-text-contrast tw-border tw-border-solid tw-border-secondary-300 tw-rounded tw-text-main tw-overflow-hidden"
+  class="tw-my-4 tw-flex tw-max-h-screen tw-flex-col tw-overflow-hidden tw-rounded tw-border tw-border-solid tw-border-secondary-300 tw-bg-text-contrast tw-text-main"
 >
   <div
-    class="tw-flex tw-gap-4 tw-p-4 tw-border-0 tw-border-b tw-border-solid tw-border-secondary-300"
+    class="tw-flex tw-gap-4 tw-border-0 tw-border-b tw-border-solid tw-border-secondary-300 tw-p-4"
   >
-    <h2 class="tw-text-lg tw-uppercase tw-grow tw-mb-0">
+    <h2 class="tw-mb-0 tw-grow tw-text-lg tw-uppercase">
       <ng-content select="[bit-modal-title]"></ng-content>
     </h2>
     <button class="tw-border-0 tw-bg-transparent tw-p-0">
@@ -13,12 +13,12 @@
     </button>
   </div>
 
-  <div class="tw-pb-8 tw-p-4 tw-overflow-y-auto">
+  <div class="tw-overflow-y-auto tw-p-4 tw-pb-8">
     <ng-content select="[bit-modal-content]"></ng-content>
   </div>
 
   <div
-    class="tw-p-4 tw-bg-background-alt tw-border-solid tw-border-secondary-300 tw-border-0 tw-border-t"
+    class="tw-border-0 tw-border-t tw-border-solid tw-border-secondary-300 tw-bg-background-alt tw-p-4"
   >
     <ng-content select="[bit-modal-footer]"></ng-content>
   </div>
diff --git a/libs/components/src/stories/colors.stories.mdx b/libs/components/src/stories/colors.stories.mdx
index a75418e4577..255b1e542a0 100644
--- a/libs/components/src/stories/colors.stories.mdx
+++ b/libs/components/src/stories/colors.stories.mdx
@@ -10,7 +10,7 @@ export const Row = (name) => (
 );
 
 export const Table = (args) => (
-  <table class={"tw-table-auto border !tw-text-main " + args.class}>
+  <table class={"border tw-table-auto !tw-text-main " + args.class}>
     <thead>
       <tr>
         <th>General usage</th>
diff --git a/libs/components/src/table/table.component.html b/libs/components/src/table/table.component.html
index e65733c4920..11108d8ec1a 100644
--- a/libs/components/src/table/table.component.html
+++ b/libs/components/src/table/table.component.html
@@ -1,6 +1,6 @@
-<table class="tw-table-auto tw-w-full tw-text-main tw-leading-normal">
+<table class="tw-w-full tw-table-auto tw-leading-normal tw-text-main">
   <thead
-    class="tw-border-solid tw-border-0 tw-border-b-2 tw-border-secondary-300 tw-text-muted tw-text-bold"
+    class="tw-text-bold tw-border-0 tw-border-b-2 tw-border-solid tw-border-secondary-300 tw-text-muted"
   >
     <ng-content select="[header]"></ng-content>
   </thead>
diff --git a/libs/components/src/tabs/tab-group.component.html b/libs/components/src/tabs/tab-group.component.html
index ad681b168f0..f4b0ced5c4c 100644
--- a/libs/components/src/tabs/tab-group.component.html
+++ b/libs/components/src/tabs/tab-group.component.html
@@ -1,6 +1,6 @@
 <div
   role="tablist"
-  class="tw-inline-flex tw-flex-wrap tw-leading-5 tw-border-0 tw-border-b tw-border-solid tw-border-secondary-300"
+  class="tw-inline-flex tw-flex-wrap tw-border-0 tw-border-b tw-border-solid tw-border-secondary-300 tw-leading-5"
 >
   <ng-content></ng-content>
 </div>
diff --git a/package-lock.json b/package-lock.json
index 7962fcf47c3..80ccff3b7ba 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -29,7 +29,7 @@
         "@microsoft/signalr-protocol-msgpack": "^6.0.7",
         "big-integer": "^1.6.51",
         "bootstrap": "4.6.0",
-        "braintree-web-drop-in": "1.33.2",
+        "braintree-web-drop-in": "^1.33.1",
         "browser-hrtime": "^1.1.8",
         "bufferutil": "^4.0.6",
         "chalk": "^4.1.0",
@@ -152,7 +152,8 @@
         "pkg": "5.7.0",
         "postcss": "^8.4.14",
         "postcss-loader": "^7.0.1",
-        "prettier": "^2.6.2",
+        "prettier": "^2.7.1",
+        "prettier-plugin-tailwindcss": "^0.1.13",
         "process": "^0.11.10",
         "regedit": "^3.0.3",
         "rimraf": "^3.0.2",
@@ -35013,6 +35014,18 @@
         "url": "https://github.com/prettier/prettier?sponsor=1"
       }
     },
+    "node_modules/prettier-plugin-tailwindcss": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.1.13.tgz",
+      "integrity": "sha512-/EKQURUrxLu66CMUg4+1LwGdxnz8of7IDvrSLqEtDqhLH61SAlNNUSr90UTvZaemujgl3OH/VHg+fyGltrNixw==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.17.0"
+      },
+      "peerDependencies": {
+        "prettier": ">=2.2.0"
+      }
+    },
     "node_modules/pretty-bytes": {
       "version": "5.6.0",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
@@ -69551,6 +69564,13 @@
       "integrity": "sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==",
       "dev": true
     },
+    "prettier-plugin-tailwindcss": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.1.13.tgz",
+      "integrity": "sha512-/EKQURUrxLu66CMUg4+1LwGdxnz8of7IDvrSLqEtDqhLH61SAlNNUSr90UTvZaemujgl3OH/VHg+fyGltrNixw==",
+      "dev": true,
+      "requires": {}
+    },
     "pretty-bytes": {
       "version": "5.6.0",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
diff --git a/package.json b/package.json
index adedb47723d..58ab8f4117d 100644
--- a/package.json
+++ b/package.json
@@ -114,7 +114,8 @@
     "pkg": "5.7.0",
     "postcss": "^8.4.14",
     "postcss-loader": "^7.0.1",
-    "prettier": "^2.6.2",
+    "prettier": "^2.7.1",
+    "prettier-plugin-tailwindcss": "^0.1.13",
     "process": "^0.11.10",
     "regedit": "^3.0.3",
     "rimraf": "^3.0.2",