LIMS-2138: Update tailwindCSS to v3

client/package.json

@@ -86,7 +86,7 @@
     "plotly.js": "^2.35.3",
     "portal-vue": "2.1.7",
     "promise": "^8.0.3",
-    "tailwindcss": "^1.9.5",
+    "tailwindcss": "^3.4.0",
     "three": "^0.143.0",
     "uglymol": "^0.6.4",
     "underscore": "1.8.3",

client/src/css/partials/_utility.scss

@@ -391,6 +391,6 @@ ul.ui-autocomplete {
 
     h1 {
         padding: 0 !important;
-        @apply tw-flex-grow;
+        @apply tw-grow;
     }
 }

client/src/js/app/components/breadcrumbs.vue

@@ -41,7 +41,7 @@ export default {
     @apply tw-text-header-bc-color;
     @apply tw-p-1;
     @apply tw-text-xxs;
-    @apply list-none;
+    @apply tw-list-none;
     @apply tw-clear-both
 }
 

client/src/js/app/views/login.vue

@@ -21,7 +21,7 @@
                 v-model="username"
                 :class="[
                   { ferror: errors.length },
-                  'tw-shadow tw-border tw-rounded tw-w-64 tw-py-2 tw-px-3 tw-text-gray-700 tw-leading-tight focus:tw-outline-none focus:tw-shadow-outline',
+                  'tw-shadow tw-border tw-rounded tw-w-64 tw-py-2 tw-px-3 tw-text-gray-700 tw-leading-tight focus:tw-outline-none focus:tw-ring',
                 ]"
                 type="text"
                 :name="name"
@@ -43,7 +43,7 @@
                 v-model="password"
                 :class="[
                   { ferror: errors.length },
-                  'tw-shadow tw-border tw-rounded tw-w-64 tw-py-2 tw-px-3 tw-text-gray-700 tw-leading-tight focus:tw-outline-none focus:tw-shadow-outline',
+                  'tw-shadow tw-border tw-rounded tw-w-64 tw-py-2 tw-px-3 tw-text-gray-700 tw-leading-tight focus:tw-outline-none focus:tw-ring',
                 ]"
                 type="password"
                 :name="name"

client/src/js/modules/types/mx/samples/plate-sample-controls.vue

@@ -92,6 +92,6 @@ export default {
 </script>
 <style scoped>
 .button {
-  @apply button tw-text-link-color tw-mx-1;
+  @apply tw-text-link-color tw-mx-1;
 }
 </style>

client/src/js/templates/dc/imageviewer.html

@@ -21,7 +21,7 @@ <h1 class="no_mobile"><span class="visit"><%-VIS_LINK%>: </span><%-DIR%><%-FILET
 <!-- With tailwind we can change the order of rendering (forwards, reverse, order-'n' etc.) -->
 <!-- We use row-reverse here because its similar to the original page structure -->
 <div class="tw-flex tw-flex-row-reverse tw-border tw-mt-2 tw-mb-2 tw-px-2">
-    <div class="tw-items-center tw-flex tw-flex-grow">
+    <div class="tw-items-center tw-flex tw-grow">
         <div class="tw-flex tw-flex-col tw-w-full">
             <!-- Row of sliders -->
             <div class="tw-flex tw-flex-row tw-p-1">
@@ -66,7 +66,7 @@ <h1 class="no_mobile"><span class="visit"><%-VIS_LINK%>: </span><%-DIR%><%-FILET
     <div class="tw-items-stretch tw-flex tw-flex-col tw-text-xs tw-py-4">
         <div class="tw-items-center">
             <button class="button submit" name="prev" title="Load previous image">&lt;</button>
-            <input class="tw-border tw-rounded tw-w-1/4 tw-text-right focus:tw-outline-none focus:tw-shadow-outline py-2 m-0" size="6" name="num" value="1" title="Load the image with this number" />/<%-NI%>
+            <input class="tw-border tw-rounded tw-w-1/4 tw-text-right focus:tw-outline-none focus:tw-ring py-2 m-0" size="6" name="num" value="1" title="Load the image with this number" />/<%-NI%>
             <button class="button submit" name="next" title="Load next image">&gt;</button>
         </div>
     </div>

client/tailwind.config.js

@@ -3,33 +3,20 @@ module.exports = {
   Tailwind can remove some of its generated classes
   We are using purgecss as well but this still helps
   */
-  purge: {
-    content: [
-      './src/**/*.html',
-      './src/**/*.vue',
-    ],
-    options: {
-      whitelist: [
-        'tw-bg-auto-integrated',
-        'tw-bg-data-collected',
-        'tw-bg-auto-indexed',
-        'tw-bg-screened',
-        'tw-bg-grid-scanned',
-        'tw-bg-loaded-by-robot'
-      ]
-    }
-  },
-  future: {
-    purgeLayersByDefault: true,
-    removeDeprecatedGapUtilities: true,
-  },
+  content: [
+    './src/**/*.html',
+    './src/**/*.vue',
+  ],
+  safelist: [
+    'tw-bg-auto-integrated',
+    'tw-bg-data-collected',
+    'tw-bg-auto-indexed',
+    'tw-bg-screened',
+    'tw-bg-grid-scanned',
+    'tw-bg-loaded-by-robot'
+  ],
   // Adding a prefix so its clear where we are overriding styles
   prefix: 'tw-',
-  variants: {
-    overflow: ['responsive', 'hover', 'focus'],
-    height: ['responsive', 'hover', 'focus'],
-    position: ['responsive', 'hover', 'focus']
-  },
   theme: {
     extend: {
       fontFamily: {
@@ -79,6 +66,17 @@ module.exports = {
       Currently using sass variables via postcss-simple-vars plugin as well.
       */
       colors: {
+        gray: {
+          100: '#f7fafc',
+          200: '#edf2f7',
+          300: '#e2e8f0',
+          400: '#cbd5e0',  // v1 value
+          500: '#a0aec0',
+          600: '#718096',
+          700: '#4a5568',
+          800: '#2d3748',
+          900: '#1a202c',
+        },
         'link-color': '#666666',
         'link-hover-color': '#222222',
 //Sidebar
@@ -172,17 +170,17 @@ module.exports = {
         'sample-group-added-dark': '#e6daae',
 // Data Collections messages color
         'info-color': {
-          default: '#00ff00',
+          DEFAULT: '#00ff00',
           lighter: '#ccffcc',
           darker: '#003300'
         },
         'alert-color': {
-          default: '#ffa500',
+          DEFAULT: '#ffa500',
           lighter: '#ffb733',
           darker: '#332100'
         },
         'warning-color': {
-          default: '#ff0000',
+          DEFAULT: '#ff0000',
           lighter: '#ff4d4d',
           darker: '#330000'
         },