[SM-110] Add prettier-plugin-tailwindcss (#3215)

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>

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

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>

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>

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>

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>

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>

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>

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>

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>