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>