fix(tailwind): Ensure tailwind properly purges unused utility classes (#2485)

platform/ui/src/components/DateRange/DateRange.css

@@ -1,5 +1,5 @@
-.DateRangePicker {
-}
+/*@tailwind base;
+@tailwind utilities;*/
 
 /** CONTAINER STYLES **/
 

platform/ui/src/components/InputGroup/InputGroup.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import getGridWidthClass from '../../utils/getGridWidthClass'
 
 import {
   InputText,
@@ -132,7 +133,7 @@ const InputGroup = ({
               key={inputMeta.name}
               className={classnames(
                 'pl-4 first:pl-12',
-                `w-${inputMeta.gridCol}/24`
+                getGridWidthClass(inputMeta.gridCol)
               )}
             >
               {renderFieldInputComponent(inputMeta)}

platform/ui/src/components/SidePanel/SidePanel.jsx

@@ -31,12 +31,12 @@ const baseClasses =
 
 const classesMap = {
   open: {
-    left: `border-r-${borderSize}`,
-    right: `border-l-${borderSize}`,
+    left: `border-r-4`,
+    right: `border-l-4`,
   },
   closed: {
-    left: `border-r-${borderSize} items-end`,
-    right: `border-l-${borderSize} items-start`,
+    left: `border-r-4 items-end`,
+    right: `border-l-4 items-start`,
   },
 };
 

platform/ui/src/components/StudyListTable/StudyListTableRow.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { Icon } from '../';
+import getGridWidthClass from '../../utils/getGridWidthClass';
 
 const StudyListTableRow = props => {
   const { tableData } = props;
@@ -36,14 +37,13 @@ const StudyListTableRow = props => {
                 >
                   {row.map((cell, index) => {
                     const { content, title, gridCol } = cell;
-
                     return (
                       <td
                         key={index}
                         className={classnames(
                           'px-4 py-2 text-base truncate',
                           { 'border-b border-secondary-light': !isExpanded },
-                          `w-${gridCol}/24` || ''
+                          getGridWidthClass(gridCol) || ''
                         )}
                         style={{
                           maxWidth: 0,

platform/ui/src/components/WindowLevelMenuItem/WindowLevelMenuItem.jsx

@@ -12,7 +12,7 @@ const WindowLevelMenuItem = ({ title, subtitle, isSelected, index }) => (
       <span className='text-common-bright mr-2 text-base whitespace-no-wrap'>
         {title}
       </span>
-      <span className='flex-1 text-aqua-pale font-thin text-sm whitespace-no-wrap'>
+      <span className='flex-1 text-aqua-pale font-light text-sm whitespace-no-wrap'>
         {subtitle}
       </span>
       <span className='text-primary-active ml-5 text-sm whitespace-no-wrap'>{index + 1}</span>

platform/ui/src/tailwind.css

@@ -1,11 +1,11 @@
+/* IMPORT CUSTOM FONT */
+@import url('https://fonts.googleapis.com/css?family=Lato:100,300,400,500,700&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-/* IMPORT CUSTOM FONT */
-@import url('https://fonts.googleapis.com/css?family=Lato:100,300,400,500,700&display=swap');
-
-/* Trincate 2 lines utility */
+/* Truncate 2 lines utility */
 .truncate-2-lines {
   overflow: hidden;
   display: -webkit-box;

platform/ui/src/utils/getGridWidthClass.js

@@ -0,0 +1,35 @@
+// This is really annoying, but we can't use string concatenation to produce names
+// or the purger will purge stuff we need. This is a lazy workaground.
+// The alternative would be to use the safelist, but then we would have to remember
+// which components which entry in the safelist are used for.
+// https://tailwindcss.com/docs/optimizing-for-production
+export default function getGridWidthClass(gridCol) {
+  const widthClasses = {
+    1: 'w-1-24',
+    2: 'w-2-24',
+    3: 'w-3-24',
+    4: 'w-4-24',
+    5: 'w-5-24',
+    6: 'w-6-24',
+    7: 'w-7-24',
+    8: 'w-8-24',
+    9: 'w-9-24',
+    10: 'w-10-24',
+    11: 'w-11-24',
+    12: 'w-12-24',
+    13: 'w-13-24',
+    14: 'w-14-24',
+    15: 'w-15-24',
+    16: 'w-16-24',
+    17: 'w-17-24',
+    18: 'w-18-24',
+    19: 'w-19-24',
+    20: 'w-20-24',
+    21: 'w-21-24',
+    22: 'w-22-24',
+    23: 'w-23-24',
+    24: 'w-24-24',
+  };
+
+  return widthClasses[gridCol];
+}