[EC-1051] Add TailwindCSS linting rules (#4605)

.eslintrc.json

@@ -111,9 +111,20 @@
     {
       "files": ["*.html"],
       "parser": "@angular-eslint/template-parser",
-      "plugins": ["@angular-eslint/template"],
+      "plugins": ["@angular-eslint/template", "tailwindcss"],
       "rules": {
-        "@angular-eslint/template/button-has-type": "error"
+        "@angular-eslint/template/button-has-type": "error",
+        "tailwindcss/no-custom-classname": [
+          "error",
+          {
+            // uses negative lookahead to whitelist any class that doesn't start with "tw-"
+            // in other words: classnames that start with tw- must be valid TailwindCSS classes
+            "whitelist": ["(?!(tw)\\-).*"]
+          }
+        ],
+        "tailwindcss/enforces-negative-arbitrary-values": "error",
+        "tailwindcss/enforces-shorthand": "error",
+        "tailwindcss/no-contradicting-classname": "error"
       }
     },
     {

apps/web/src/app/accounts/login/login-with-device.component.html

@@ -1,3 +1,5 @@
+<!-- Please remove this disable statement when editing this file! -->
+<!-- eslint-disable tailwindcss/no-custom-classname -->
 <div
   class="tw-mx-auto tw-mt-5 tw-flex tw-max-w-lg tw-flex-col tw-items-center tw-justify-center tw-p-8"
 >

apps/web/src/app/accounts/register-form/register-form.component.html

@@ -1,3 +1,5 @@
+<!-- Please remove this disable statement when editing this file! -->
+<!-- eslint-disable tailwindcss/no-custom-classname -->
 <form
   #form
   (ngSubmit)="submit()"

apps/web/src/app/accounts/trial-initiation/trial-initiation.component.html

@@ -1,5 +1,6 @@
 <!-- Please remove this disable statement when editing this file! -->
 <!-- eslint-disable @angular-eslint/template/button-has-type -->
+<!-- eslint-disable tailwindcss/no-custom-classname -->
 <div *ngIf="accountCreateOnly" class="">
   <h1 class="tw-mt-12 tw-text-center tw-text-xl">{{ "createAccount" | i18n }}</h1>
   <div

apps/web/src/app/accounts/trial-initiation/vertical-stepper/vertical-step-content.component.html

@@ -1,5 +1,6 @@
 <!-- Please remove this disable statement when editing this file! -->
 <!-- eslint-disable @angular-eslint/template/button-has-type -->
+<!-- eslint-disable tailwindcss/no-custom-classname -->
 <div class="tw-m-2.5 tw-h-16 tw-text-center">
   <button
     (click)="selectStep()"

apps/web/src/app/components/user-verification-prompt.component.html

@@ -3,7 +3,7 @@
 <div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="confirmUserTitle">
   <div class="modal-dialog modal-dialog-scrollable" role="document">
     <form class="modal-content" #form (ngSubmit)="submit()">
-      <h2 class="tw-mt-6 tw-mb-6 tw-pl-3.5 tw-pr-3.5 tw-font-semibold" id="modalTitle | i18n ">
+      <h2 class="tw-my-6 tw-px-3.5 tw-font-semibold" id="modalTitle | i18n ">
         {{ modalTitle | i18n | uppercase }}
       </h2>
       <div class="tw-border-0 tw-border-t tw-border-solid tw-border-secondary-300 tw-p-3.5">

apps/web/src/app/organizations/shared/components/access-selector/access-selector.component.html

@@ -1,3 +1,5 @@
+<!-- Please remove this disable statement when editing this file! -->
+<!-- eslint-disable tailwindcss/no-custom-classname -->
 <div class="tw-flex">
   <bit-form-field *ngIf="permissionMode == 'edit'" class="tw-mr-3">
     <bit-label>{{ "permission" | i18n }}</bit-label>
@@ -100,7 +102,7 @@
             </select>
             <label
               [for]="'permission' + i"
-              class="tw-absolute tw-inset-y-0 tw-right-4 tw-mb-0 tw-block tw-flex tw-items-center"
+              class="tw-absolute tw-inset-y-0 tw-right-4 tw-mb-0 tw-flex tw-items-center"
             >
               <i class="bwi bwi-sm bwi-angle-down tw-leading-[0]"></i>
             </label>

apps/web/src/app/settings/change-avatar.component.html

@@ -1,3 +1,5 @@
+<!-- Please remove this disable statement when editing this file! -->
+<!-- eslint-disable tailwindcss/no-custom-classname -->
 <div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="customizeTitle">
   <div class="modal-dialog modal-dialog-scrollable tw-w-[600px] tw-max-w-none" role="document">
     <div class="modal-content">
@@ -21,7 +23,7 @@
           {{ error }}
         </app-callout>
         <p class="tw-text-lg">{{ "pickAnAvatarColor" | i18n }}</p>
-        <div class="tw-flex tw-flex-wrap tw-justify-center tw-gap-8 tw-gap-y-8">
+        <div class="tw-flex tw-flex-wrap tw-justify-center tw-gap-8">
           <ng-container *ngFor="let c of defaultColorPalette">
             <selectable-avatar
               appStopClick
@@ -44,7 +46,7 @@
                 '!tw-outline-[3px] tw-outline-primary-500 hover:tw-outline-[3px] hover:tw-outline-primary-500':
                   customColorSelected
               }"
-              class="tw-outline-solid tw-bg-white tw-relative tw-inline-block tw-flex tw-h-24 tw-w-24 tw-cursor-pointer tw-place-content-center tw-content-center tw-justify-center tw-rounded-full tw-border tw-border-solid tw-border-secondary-500 tw-outline tw-outline-0 tw-outline-offset-1 hover:tw-outline-1 hover:tw-outline-primary-300 focus:tw-outline-2 focus:tw-outline-primary-500"
+              class="tw-outline-solid tw-bg-white tw-relative tw-flex tw-h-24 tw-w-24 tw-cursor-pointer tw-place-content-center tw-content-center tw-justify-center tw-rounded-full tw-border tw-border-solid tw-border-secondary-500 tw-outline tw-outline-0 tw-outline-offset-1 hover:tw-outline-1 hover:tw-outline-primary-300 focus:tw-outline-2 focus:tw-outline-primary-500"
               [style.background-color]="customColor$ | async"
             >
               <i

apps/web/src/app/tools/import-export/export.component.html

@@ -1,3 +1,5 @@
+<!-- Please remove this disable statement when editing this file! -->
+<!-- eslint-disable tailwindcss/no-custom-classname -->
 <form
   #form
   (ngSubmit)="submit()"
@@ -48,7 +50,7 @@
               />
             </div>
             <div>
-              <label class="tw-semi-bold tw-text-md tw-ml-1 tw-mt-1 tw-mb-1" for="AccountEncrypted">
+              <label class="tw-semi-bold tw-text-md tw-my-1 tw-ml-1" for="AccountEncrypted">
                 {{ "accountRestricted" | i18n }}
               </label>
             </div>
@@ -71,7 +73,7 @@
               />
             </div>
             <div>
-              <label class="tw-semi-bold tw-text-md tw-ml-1 tw-mt-1 tw-mb-1" for="FileEncrypted">{{
+              <label class="tw-semi-bold tw-text-md tw-my-1 tw-ml-1" for="FileEncrypted">{{
                 "passwordProtected" | i18n
               }}</label>
             </div>

apps/web/src/app/tools/import-export/file-password-prompt.component.html

@@ -1,3 +1,5 @@
+<!-- Please remove this disable statement when editing this file! -->
+<!-- eslint-disable tailwindcss/no-custom-classname -->
 <div
   class="modal fade"
   role="dialog"
@@ -7,11 +9,11 @@
   <div class="modal-dialog modal-dialog-scrollable" role="document">
     <form #form (ngSubmit)="submit()">
       <div class="form-group modal-content">
-        <h2 class="tw-mt-6 tw-mb-6 tw-ml-3.5 tw-font-semibold" id="confirmVaultImport">
+        <h2 class="tw-my-6 tw-ml-3.5 tw-font-semibold" id="confirmVaultImport">
           {{ "confirmVaultImport" | i18n | uppercase }}
         </h2>
         <div
-          class="tw-border-0 tw-border-t tw-border-solid tw-border-secondary-300 tw-pr-3.5 tw-pt-3.5 tw-pl-3.5"
+          class="tw-border-0 tw-border-t tw-border-solid tw-border-secondary-300 tw-px-3.5 tw-pt-3.5"
         >
           {{ "confirmVaultImportDesc" | i18n }}
           <bit-form-field class="tw-pt-3.5">
@@ -28,7 +30,7 @@
           </bit-form-field>
         </div>
         <div
-          class="tw-flex tw-w-full tw-flex-wrap tw-items-center tw-border-0 tw-border-t tw-border-solid tw-border-secondary-300 tw-bg-background-alt tw-pl-3.5 tw-pr-3.5 tw-pb-3.5 tw-pt-4 tw-pl-4 tw-pr-4"
+          class="tw-flex tw-w-full tw-flex-wrap tw-items-center tw-border-0 tw-border-t tw-border-solid tw-border-secondary-300 tw-bg-background-alt tw-px-3.5 tw-pb-3.5 tw-pt-4"
         >
           <button bitButton buttonType="primary" class="tw-mr-2" type="submit" appBlurClick>
             <span>{{ "importData" | i18n }}</span>

apps/web/src/vault/app/vault/add-edit.component.html

@@ -282,7 +282,7 @@
                   </svg>
                 </span>
                 <span
-                  class="totp-code tw-mr-2 tw-ml-2 tw-mt-1"
+                  class="totp-code tw-mx-2 tw-mt-1"
                   title="{{ 'verificationCodeTotp' | i18n }}"
                   >{{ totpCodeFormatted }}</span
                 >

bitwarden_license/bit-web/src/app/secrets-manager/secrets/dialog/secret-dialog.component.html

@@ -1,5 +1,6 @@
 <!-- Please remove this disable statement when editing this file! -->
 <!-- eslint-disable @angular-eslint/template/button-has-type -->
+<!-- eslint-disable tailwindcss/no-custom-classname -->
 <form [formGroup]="formGroup" [bitSubmit]="submit">
   <bit-dialog dialogSize="default" disablePadding>
     <ng-container bitDialogTitle>{{ title | i18n }}</ng-container>

libs/components/src/table/table.component.html

@@ -1,3 +1,5 @@
+<!-- Please remove this disable statement when editing this file! -->
+<!-- eslint-disable tailwindcss/no-custom-classname -->
 <table class="tw-w-full tw-table-auto tw-leading-normal tw-text-main">
   <thead
     class="tw-text-bold tw-border-0 tw-border-b-2 tw-border-solid tw-border-secondary-300 tw-text-muted"

package-lock.json

@@ -135,6 +135,7 @@
         "eslint-plugin-import": "^2.26.0",
         "eslint-plugin-rxjs": "^5.0.2",
         "eslint-plugin-rxjs-angular": "^2.0.0",
+        "eslint-plugin-tailwindcss": "^3.8.3",
         "gulp": "^4.0.2",
         "gulp-filter": "^7.0.0",
         "gulp-if": "^3.0.0",
@@ -22395,6 +22396,22 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/eslint-plugin-tailwindcss": {
+      "version": "3.8.3",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-tailwindcss/-/eslint-plugin-tailwindcss-3.8.3.tgz",
+      "integrity": "sha512-wfzfCmc9yONNW+TqfR+QWZ+syFPQ8zMOrIGx500lS4XITEm0HJYGyKh1sC1tQ9+Wmt58bnHzW3Yc31vy5RlJww==",
+      "dev": true,
+      "dependencies": {
+        "fast-glob": "^3.2.5",
+        "postcss": "^8.4.4"
+      },
+      "engines": {
+        "node": ">=12.13.0"
+      },
+      "peerDependencies": {
+        "tailwindcss": "^3.2.2"
+      }
+    },
     "node_modules/eslint-scope": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
@@ -60933,6 +60950,16 @@
         "tslib": "^2.0.0"
       }
     },
+    "eslint-plugin-tailwindcss": {
+      "version": "3.8.3",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-tailwindcss/-/eslint-plugin-tailwindcss-3.8.3.tgz",
+      "integrity": "sha512-wfzfCmc9yONNW+TqfR+QWZ+syFPQ8zMOrIGx500lS4XITEm0HJYGyKh1sC1tQ9+Wmt58bnHzW3Yc31vy5RlJww==",
+      "dev": true,
+      "requires": {
+        "fast-glob": "^3.2.5",
+        "postcss": "^8.4.4"
+      }
+    },
     "eslint-scope": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",

package.json

@@ -98,6 +98,7 @@
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-rxjs": "^5.0.2",
     "eslint-plugin-rxjs-angular": "^2.0.0",
+    "eslint-plugin-tailwindcss": "^3.8.3",
     "gulp": "^4.0.2",
     "gulp-filter": "^7.0.0",
     "gulp-if": "^3.0.0",