feat: upgrade tailwind to version 3 (#2933)

* initial upgrade commit for tailwind

* fix: inconsistensies in button

* fix: various places with conflicts

* final fixes

* fix: dialog header color

* apply review

extensions/measurement-tracking/src/panels/PanelMeasurementTableTracking/ActionButtons.tsx

@@ -9,16 +9,22 @@ function ActionButtons({ onExportClick, onCreateReportClick }) {
 
   return (
     <React.Fragment>
-      <ButtonGroup color="black" size="inherit">
-        <Button className="text-base px-2 py-2" onClick={onExportClick}>
-          {t('Export')}
-        </Button>
-      </ButtonGroup>
       <Button
-        className="ml-2 text-base"
+        className="text-base px-2 py-2"
+        size="initial"
         variant="outlined"
-        size="small"
+        color="default"
+        border="secondary"
+        onClick={onExportClick}
+      >
+        {t('Export')}
+      </Button>
+      <Button
+        className="ml-2 px-2 text-base"
+        variant="outlined"
+        size="initial"
         color="black"
+        border="secondary"
         onClick={onCreateReportClick}
       >
         {t('Create Report')}

extensions/tmtv/src/Panels/PanelPetSUV.tsx

@@ -148,13 +148,11 @@ export default function PanelPetSUV({ servicesManager, commandsManager }) {
     <div className="overflow-x-hidden overflow-y-auto invisible-scrollbar">
       {
         <div className="flex flex-col">
-          <div className="flex flex-col p-4 space-y-2 bg-primary-dark">
+          <div className="flex flex-col p-4 space-y-4 bg-primary-dark">
             <Input
               label={t('Patient Sex')}
-              labelClassName="text-white"
+              labelClassName="text-white mb-2"
-              className="mt-1 mb-2 bg-black border-primary-main"
+              className="mt-1"
-              type="text"
-              containerClassName="mr-2"
               value={metadata.PatientSex || ''}
               onChange={e => {
                 handleMetadataChange({
@@ -164,10 +162,8 @@ export default function PanelPetSUV({ servicesManager, commandsManager }) {
             />
             <Input
               label={t('Patient Weight (kg)')}
-              labelClassName="text-white"
+              labelClassName="text-white mb-2"
-              className="mt-1 mb-2 bg-black border-primary-main"
+              className="mt-1"
-              type="text"
-              containerClassName="mr-2"
               value={metadata.PatientWeight || ''}
               onChange={e => {
                 handleMetadataChange({
@@ -177,10 +173,8 @@ export default function PanelPetSUV({ servicesManager, commandsManager }) {
             />
             <Input
               label={t('Total Dose (bq)')}
-              labelClassName="text-white"
+              labelClassName="text-white mb-2"
-              className="mt-1 mb-2 bg-black border-primary-main"
+              className="mt-1"
-              type="text"
-              containerClassName="mr-2"
               value={
                 metadata.RadiopharmaceuticalInformationSequence
                   .RadionuclideTotalDose || ''
@@ -195,10 +189,8 @@ export default function PanelPetSUV({ servicesManager, commandsManager }) {
             />
             <Input
               label={t('Half Life (s)')}
-              labelClassName="text-white"
+              labelClassName="text-white mb-2"
-              className="mt-1 mb-2 bg-black border-primary-main"
+              className="mt-1"
-              type="text"
-              containerClassName="mr-2"
               value={
                 metadata.RadiopharmaceuticalInformationSequence
                   .RadionuclideHalfLife || ''
@@ -213,10 +205,8 @@ export default function PanelPetSUV({ servicesManager, commandsManager }) {
             />
             <Input
               label={t('Injection Time (s)')}
-              labelClassName="text-white"
+              labelClassName="text-white mb-2"
-              className="mt-1 mb-2 bg-black border-primary-main"
+              className="mt-1"
-              type="text"
-              containerClassName="mr-2"
               value={
                 metadata.RadiopharmaceuticalInformationSequence
                   .RadiopharmaceuticalStartTime || ''
@@ -231,21 +221,15 @@ export default function PanelPetSUV({ servicesManager, commandsManager }) {
             />
             <Input
               label={t('Acquisition Time (s)')}
-              labelClassName="text-white"
+              labelClassName="text-white mb-2"
-              className="mt-1 mb-2 bg-black border-primary-main"
+              className="mt-1 mb-2"
-              type="text"
-              containerClassName="mr-2"
               value={metadata.SeriesTime || ''}
               onChange={() => {}}
             />
+            <Button color="primary" onClick={updateMetadata}>
+              Reload Data
+            </Button>
           </div>
-          <Button
-            color="primary"
-            onClick={updateMetadata}
-            className="px-1 py-1 mx-4 mt-2 text-xs text-white border-b border-transparent"
-          >
-            Reload Data
-          </Button>
         </div>
       }
     </div>

extensions/tmtv/src/Panels/PanelROIThresholdSegmentation/ROIThresholdConfiguration.tsx

@@ -38,17 +38,21 @@ function ROIThresholdConfiguration({ config, dispatch, runCommand }) {
           />
         </div>
         <div className="w-1/2">
-          <ButtonGroup color="black" size="inherit">
+          <ButtonGroup>
             <Button
-              className="px-2 py-2 text-base"
+              size="initial"
+              className="px-2 py-2 text-base text-white"
+              color="primaryLight"
+              variant="outlined"
               onClick={() => runCommand('setStartSliceForROIThresholdTool')}
             >
               {t('Start')}
             </Button>
-          </ButtonGroup>
-          <ButtonGroup color="black" size="inherit">
             <Button
-              className="px-2 py-2 text-base"
+              size="initial"
+              color="primaryLight"
+              variant="outlined"
+              className="px-2 py-2 text-base text-white"
               onClick={() => runCommand('setEndSliceForROIThresholdTool')}
             >
               {t('End')}

extensions/tmtv/src/Panels/PanelROIThresholdSegmentation/segmentationEditHandler.tsx

@@ -29,7 +29,7 @@ function segmentationItemEditHandler({ id, servicesManager }) {
     showOverlay: true,
     content: Dialog,
     contentProps: {
-      title: 'Enter your annotation',
+      title: 'Enter your Segmentation',
       noCloseButton: true,
       value: { label: segmentation.label || '' },
       body: ({ value, setValue }) => {

platform/docs/tailwind.config.js

@@ -1,16 +1,12 @@
 module.exports = {
   prefix: '',
-  important: false,
   separator: ':',
-  purge: {
+  content: [
-    enabled: true,
+    './docs/**/*.jsx',
-    content: [
+    './docs/**/*.mdx',
-      './docs/**/*.jsx',
+    './node_modules/@ohif/ui/src/**/*.{js,jsx,ts,tsx,css}',
-      './docs/**/*.mdx',
+    '../../node_modules/@ohif/ui/src/**/*.{js,jsx,ts,tsx,css}',
-      './node_modules/@ohif/ui/src/**/*.{js,jsx,ts,tsx,css}',
+  ],
-      '../../node_modules/@ohif/ui/src/**/*.{js,jsx,ts,tsx,css}',
-    ],
-  },
   theme: {
     screens: {
       sm: '640px',

platform/ui/package.json

@@ -62,6 +62,6 @@
     "postcss": "^8.3.5",
     "postcss-loader": "^6.1.1",
     "prop-types": "15.7.2",
-    "tailwindcss": "2.2.4"
+    "tailwindcss": "3.1.8"
   }
 }

platform/ui/src/components/AboutModal/AboutModal.tsx

@@ -9,7 +9,8 @@ const Link = ({ href, children, showIcon = false }) => {
       <Typography
         variant="subtitle"
         component="p"
-        className="flex items-center text-primary-active"
+        color="primaryActive"
+        className="flex items-center"
       >
         {children}
         {!!showIcon && (

platform/ui/src/components/Button/Button.tsx

@@ -10,6 +10,7 @@ const defaults = {
   disabled: false,
   fullWidth: false,
   rounded: 'medium',
+  border: 'none',
   size: 'medium',
   type: 'button',
   variant: 'contained',
@@ -23,7 +24,7 @@ const roundedClasses = {
   full: 'rounded-full',
 };
 
-const variantClasses = {
+const variants = {
   text: {
     default:
       'text-primary-light hover:bg-primary-light hover:text-white active:opacity-80 focus:bg-primary-light focus:text-white',
@@ -38,41 +39,92 @@ const variantClasses = {
   },
   outlined: {
     default:
-      'border bg-trasparent border-primary-light text-primary-light hover:bg-primary-light hover:text-black focus:text-black focus:bg-primary-light active:opacity-80',
+      'text-primary-light hover:bg-primary-light hover:text-black focus:text-black focus:bg-primary-light active:opacity-80',
     primary:
-      'border bg-transparent border-primary-main text-primary-main hover:opacity-80 active:opacity-100 focus:opacity-80',
+      'text-primary-main hover:opacity-80 active:opacity-100 focus:opacity-80',
     secondary:
-      'border bg-transparent border-secondary-light text-secondary-light hover:opacity-80 active:opacity-100 focus:opacity-80',
+      'text-secondary-light hover:opacity-80 active:opacity-100 focus:opacity-80',
-    white:
+    white: 'text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
-      'border bg-transparent border-white text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
     black:
-      'border bg-black border-primary-main text-white hover:bg-primary-main focus:bg-primary-main hover:border-black focus:border-black',
+      'text-white hover:bg-primary-main focus:bg-primary-main hover:border-black focus:border-black',
+    primaryActive:
+      'text-primary-active hover:opacity-80 active:opacity-100 focus:opacity-80',
+    primaryLight:
+      'border bg-transparent border-primary-main text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
   },
   contained: {
-    default:
+    default: 'text-black hover:opacity-80 active:opacity-100 focus:opacity-80',
-      'bg-primary-light text-black hover:opacity-80 active:opacity-100 focus:opacity-80',
+    primary: 'text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
-    primary:
-      'bg-primary-main text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
     secondary:
-      'bg-secondary-light text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
+      'text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
-    white:
+    white: 'text-black hover:opacity-80 active:opacity-100 focus:opacity-80',
-      'bg-white text-black hover:opacity-80 active:opacity-100 focus:opacity-80',
+    black: 'text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
-    black:
-      'bg-black text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
     light:
-      'border bg-primary-light border-primary-light text-black hover:opacity-80 active:opacity-100 focus:opacity-80',
+      'border text-black hover:opacity-80 active:opacity-100 focus:opacity-80',
   },
   disabled: {
-    default: 'cursor-not-allowed opacity-50 bg-primary-light text-black',
+    default: 'cursor-not-allowed opacity-50 text-black',
-    primary: 'cursor-not-allowed opacity-50 bg-primary-main text-white',
+    primary: 'cursor-not-allowed opacity-50 text-white',
-    secondary: 'cursor-not-allowed opacity-50 bg-secondary-light text-white',
+    secondary: 'cursor-not-allowed opacity-50 text-white',
-    white: 'cursor-not-allowed opacity-50 bg-white text-black',
+    white: 'cursor-not-allowed opacity-50 text-black',
-    black: 'cursor-not-allowed opacity-50 bg-black text-white',
+    black: 'cursor-not-allowed opacity-50 text-white',
-    light:
+    light: 'cursor-not-allowed opacity-50 border text-black',
-      'cursor-not-allowed opacity-50 border bg-primary-light border-primary-light text-black',
   },
 };
 
+const defaultVariantBackGroundColor = {
+  text: {
+    default: '',
+    primary: '',
+    secondary: '',
+    white: '',
+    black: '',
+  },
+  outlined: {
+    default: 'bg-transparent',
+    primary: 'bg-transparent',
+    secondary: 'bg-transparent',
+    black: 'bg-black',
+    white: '',
+  },
+  contained: {
+    default: 'bg-primary-light',
+    primary: 'bg-primary-main',
+    secondary: 'bg-secondary-light',
+    white: 'bg-white',
+    black: 'bg-black',
+    light: 'bg-primary-light',
+  },
+  disabled: {
+    default: 'bg-primary-light',
+    primary: 'bg-primary-main',
+    secondary: 'bg-secondary-light',
+    white: 'bg-white',
+    black: 'bg-black',
+    light: 'bg-primary-light',
+  },
+};
+
+const _getVariantClass = (variant, color, bgColor = null) => {
+  const defaultBackgroundColor = defaultVariantBackGroundColor[variant][color];
+
+  if (!bgColor) {
+    bgColor = defaultBackgroundColor;
+  }
+
+  return `${variants[variant][color]} ${bgColor}`;
+};
+
+const borderClasses = {
+  none: '',
+  light: 'border border-primary-light',
+  primary: 'border border-primary-main',
+  primaryActive: 'border border-primary-active',
+  secondary: 'border border-secondary-light',
+  white: 'border border-white',
+  black: 'border border-black',
+};
+
 const sizeClasses = {
   small: 'py-2 px-2 text-sm min-w-md',
   medium: 'py-2 px-2 text-lg min-w-md',
@@ -89,11 +141,13 @@ const Button = ({
   children,
   variant = defaults.variant,
   color = defaults.color,
+  border = defaults.border,
   size = defaults.size,
   rounded = defaults.rounded,
   disabled = defaults.disabled,
   type = defaults.type,
   fullWidth = defaults.fullWidth,
+  bgColor = null,
   startIcon: startIconProp,
   endIcon: endIconProp,
   name,
@@ -126,16 +180,19 @@ const Button = ({
     }
   };
 
+  const finalClassName = classnames(
+    baseClasses,
+    _getVariantClass(variant, color, bgColor),
+    borderClasses[border],
+    roundedClasses[rounded],
+    sizeClasses[size],
+    fullWidthClasses[fullWidth],
+    className
+  );
+
   return (
     <button
-      className={classnames(
+      className={finalClassName}
-        className,
-        baseClasses,
-        variantClasses[variant][color],
-        roundedClasses[rounded],
-        sizeClasses[size],
-        fullWidthClasses[fullWidth]
-      )}
       disabled={disabled}
       ref={buttonElement}
       onClick={handleOnClick}
@@ -176,6 +233,14 @@ Button.propTypes = {
     'inherit',
     'light',
   ]),
+  border: PropTypes.oneOf([
+    'none',
+    'default',
+    'primary',
+    'secondary',
+    'white',
+    'black',
+  ]),
   /** Whether the button should have full width  */
   fullWidth: PropTypes.bool,
   /** Whether the button should be disabled  */
@@ -189,6 +254,8 @@ Button.propTypes = {
   endIcon: PropTypes.node,
   /** Additional TailwindCSS classnames */
   className: PropTypes.string,
+  /** Background color for the button to override*/
+  bgColor: PropTypes.string,
 };
 
 export default Button;

platform/ui/src/components/Dialog/Dialog.tsx

@@ -24,7 +24,7 @@ const Dialog = ({
 
   const theme = 'bg-secondary-light';
   const flex = 'flex flex-col';
-  const border = 'border-0 rounded-lg shadow-lg';
+  const border = 'border-0 rounded-lg drop-shadow-lg';
   const outline = 'outline-none focus:outline-none';
   const position = 'relative';
   const width = 'w-full';

platform/ui/src/components/Dialog/Header.tsx

@@ -27,7 +27,7 @@ const Header = ({ title, noCloseButton, onClose }) => {
 
   return (
     <div className={classNames(theme, flex, border, spacing)}>
-      <Typography variant="h6" className="text-primary-active">
+      <Typography variant="h6" color="primaryActive">
         {title}
       </Typography>
       {!noCloseButton && <CloseButton onClick={onClose} />}
@@ -43,7 +43,7 @@ Header.propTypes = {
 };
 
 Header.defaultProps = {
-  noCloseButton: false
+  noCloseButton: false,
 };
 
 export default Header;

platform/ui/src/components/Dropdown/Dropdown.tsx

@@ -4,7 +4,7 @@ import classnames from 'classnames';
 
 import { Icon, Typography } from '../';
 
-const Dropdown = ({ id, children, showDropdownIcon, list }) => {
+const Dropdown = ({ id, children, showDropdownIcon, list, titleClassName }) => {
   const [open, setOpen] = useState(false);
   const element = useRef(null);
 
@@ -22,7 +22,7 @@ const Dropdown = ({ id, children, showDropdownIcon, list }) => {
         data-cy={id}
       >
         {!!icon && <Icon name={icon} className="w-4 mr-2 text-white" />}
-        <Typography>{title}</Typography>
+        <Typography className={titleClassName}>{title}</Typography>
       </div>
     );
   }, []);
@@ -109,6 +109,7 @@ Dropdown.propTypes = {
   id: PropTypes.string,
   children: PropTypes.node.isRequired,
   showDropdownIcon: PropTypes.bool,
+  titleClassName: PropTypes.string,
   /** Items to render in the select's drop down */
   list: PropTypes.arrayOf(
     PropTypes.shape({

platform/ui/src/components/Modal/Modal.css

@@ -1,3 +1,3 @@
 .modal-content {
-  max-height: calc(100vh - theme('spacing.250px'));
+  max-height: calc(100vh - 250px);
 }

platform/ui/src/components/Modal/Modal.tsx

@@ -5,7 +5,7 @@ import ReactModal from 'react-modal';
 import './Modal.css';
 
 import { Typography, Icon } from '../';
-import { useModal } from '../../contextProviders'
+import { useModal } from '../../contextProviders';
 
 if (typeof document !== 'undefined') {
   ReactModal.setAppElement(document.getElementById('root'));
@@ -31,7 +31,7 @@ const Modal = ({
         <header className="flex items-center p-4 border-b-2 border-black bg-secondary-dark rounded-tl rounded-tr">
           <Typography
             variant="h4"
-            className="flex flex-grow text-primary-light font-light"
+            className="flex grow text-primary-light font-light"
           >
             {title}
           </Typography>

platform/ui/src/components/Notification/Notification.tsx

@@ -66,7 +66,7 @@ const Notification = ({
       className="flex flex-col p-2 mx-2 mt-2 rounded bg-common-bright"
       data-cy={id}
     >
-      <div className="flex flex-grow">
+      <div className="flex grow">
         <Icon name={icon} className={classnames('w-5', color)} />
         <span className="ml-2 text-base text-black">{message}</span>
       </div>

platform/ui/src/components/SidePanel/SidePanel.tsx

@@ -89,6 +89,7 @@ const SidePanel = ({
           key={i}
           variant="text"
           color="inherit"
+          border="none"
           onClick={() => {
             setComponentOpen(childComponent.name);
           }}
@@ -97,7 +98,7 @@ const SidePanel = ({
             width: `${collapsedWidth}px`,
           }}
           name={childComponent.name}
-          className="flex flex-col text-xs px-1 py-1 text-white border-transparent border-b"
+          className="flex flex-col text-xs px-1 text-white border-transparent border-b"
         >
           <Icon
             name={childComponent.iconName}
@@ -126,6 +127,7 @@ const SidePanel = ({
             <Button
               variant="text"
               color="inherit"
+              border="none"
               rounded="none"
               onClick={() => {
                 setComponentOpen(null);

platform/ui/src/components/StudyBrowser/StudyBrowser.tsx

@@ -6,8 +6,7 @@ import { useTranslation } from 'react-i18next';
 import { ButtonGroup, Button, StudyItem, ThumbnailList } from '../';
 import { StringNumber } from '../../Types';
 
-const buttonClasses = 'text-white text-base border-none bg-black p-2 min-w-18';
+const buttonClasses = 'text-white text-base border-none p-2 min-w-18';
-const activeButtonClasses = 'bg-primary-main';
 
 const getTrackedSeries = displaySets => {
   let trackedSeries = 0;
@@ -92,11 +91,9 @@ const StudyBrowser = ({
             return (
               <Button
                 key={name}
-                className={classnames(
+                className={classnames(buttonClasses)}
-                  buttonClasses,
-                  isActive && activeButtonClasses
-                )}
                 size="initial"
+                bgColor={isActive ? 'bg-primary-main' : 'bg-black'}
                 onClick={() => {
                   onClickTab(name);
                 }}

platform/ui/src/components/StudyItem/StudyItem.tsx

@@ -37,7 +37,9 @@ const StudyItem = ({
         </div>
         <div className="flex flex-row py-1">
           <div className="pr-5 text-xl text-blue-300">{modalities}</div>
-          <div className="text-base text-blue-300 break-words truncate-2-lines">{description}</div>
+          <div className="text-base text-blue-300 break-words truncate-2-lines">
+            {description}
+          </div>
         </div>
       </div>
       {!!trackedSeries && (

platform/ui/src/components/StudyListFilter/StudyListFilter.tsx

@@ -12,7 +12,7 @@ const StudyListFilter = ({
   isFiltering,
   numOfStudies,
 }) => {
-  const { t } = useTranslation("StudyList")
+  const { t } = useTranslation('StudyList');
   const { sortBy, sortDirection } = filterValues;
   const filterSorting = { sortBy, sortDirection };
   const setFilterSorting = sortingValues => {
@@ -39,15 +39,20 @@ const StudyListFilter = ({
                   <Button
                     rounded="full"
                     variant="outlined"
-                    color="primary"
+                    color="primaryActive"
-                    className="mx-8 text-primary-active border-primary-active"
+                    border="primaryActive"
+                    className="mx-8"
                     startIcon={<Icon name="cancel" />}
                     onClick={clearFilters}
                   >
                     {t('Clear filters')}
                   </Button>
                 )}
-                <Typography variant="h4" className="mr-2" data-cy={"num-studies"}>
+                <Typography
+                  variant="h4"
+                  className="mr-2"
+                  data-cy={'num-studies'}
+                >
                   {numOfStudies > 100 ? '>100' : numOfStudies}
                 </Typography>
                 <Typography

platform/ui/src/components/StudyListPagination/StudyListPagination.tsx

@@ -9,7 +9,7 @@ const StudyListPagination = ({
   perPage,
   onChangePerPage,
 }) => {
-  const { t } = useTranslation("StudyList")
+  const { t } = useTranslation('StudyList');
 
   const navigateToPage = page => {
     const toPage = page < 1 ? 1 : page;
@@ -21,8 +21,10 @@ const StudyListPagination = ({
     { value: '50', label: '50' },
     { value: '100', label: '100' },
   ];
-  const [selectedRange, setSelectedRange] = useState(ranges.find(r => r.value === perPage));
+  const [selectedRange, setSelectedRange] = useState(
-  const onSelectedRange = (selectedRange) => {
+    ranges.find(r => r.value === perPage)
+  );
+  const onSelectedRange = selectedRange => {
     setSelectedRange(selectedRange);
     onChangePerPage(selectedRange.value);
   };
@@ -33,7 +35,7 @@ const StudyListPagination = ({
         <div className="flex justify-between">
           <div className="flex items-center">
             <Select
-              id={"rows-per-page"}
+              id="rows-per-page"
               className="relative mr-3 w-16 border-primary-main"
               options={ranges}
               value={selectedRange}
@@ -53,25 +55,33 @@ const StudyListPagination = ({
               <Typography className="opacity-60 mr-4 text-base">
                 Page {currentPage}
               </Typography>
-              <ButtonGroup color="primary">
+              <ButtonGroup>
                 <Button
                   size="initial"
-                  className="border-primary-main px-4 py-2 text-base"
+                  className="px-4 py-2 text-base"
                   color="white"
+                  border="primary"
+                  variant="outlined"
                   onClick={() => navigateToPage(1)}
                 >
                   {`<<`}
                 </Button>
                 <Button
                   size="initial"
-                  className="border-primary-main py-2 px-2 text-base"
+                  className="py-2 px-2 text-base"
                   color="white"
+                  border="primary"
+                  variant="outlined"
                   onClick={() => navigateToPage(currentPage - 1)}
-                >{t(`< Previous`)}</Button>
+                >
+                  {t(`< Previous`)}
+                </Button>
                 <Button
                   size="initial"
-                  className="border-primary-main py-2 px-4 text-base"
+                  className="py-2 px-4 text-base"
                   color="white"
+                  border="primary"
+                  variant="outlined"
                   onClick={() => navigateToPage(currentPage + 1)}
                 >
                   {t(`Next >`)}

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

@@ -17,9 +17,12 @@ const StudyListTableRow = props => {
         >
           <div
             className={classnames(
-              'w-full transition border-transparent duration-300',
+              'w-full transition duration-300',
               {
                 'border border-primary-light rounded overflow-hidden mb-2 hover:border-secondary-light': isExpanded,
+              },
+              {
+                'border-transparent': !isExpanded,
               }
             )}
           >
@@ -27,7 +30,7 @@ const StudyListTableRow = props => {
               <tbody>
                 <tr
                   className={classnames(
-                    'cursor-pointer hover:bg-secondary-main transition duration-300 bg-black',
+                    'cursor-pointer hover:bg-secondary-main transition duration-300',
                     {
                       'bg-primary-dark': !isExpanded,
                     },
@@ -54,15 +57,19 @@ const StudyListTableRow = props => {
                           {index === 0 && (
                             <div>
                               <Icon
-                                name={isExpanded ? 'chevron-down' : 'chevron-right'}
+                                name={
+                                  isExpanded ? 'chevron-down' : 'chevron-right'
+                                }
                                 className="mr-4 inline-flex"
                               />
                             </div>
                           )}
-                          <div className={classnames(
+                          <div
-                            { 'overflow-hidden': true },
+                            className={classnames(
-                            { 'truncate': true }
+                              { 'overflow-hidden': true },
-                          )}>
+                              { truncate: true }
+                            )}
+                          >
                             {content}
                           </div>
                         </div>

platform/ui/src/components/Typography/Typography.tsx

@@ -45,6 +45,7 @@ const classes = {
     initial: 'text-white',
     inherit: 'text-inherit',
     primary: 'text-primary-main',
+    primaryActive: 'text-primary-active',
     secondary: 'text-common-light',
     error: 'text-red-600',
   },

platform/ui/src/components/UserPreferences/UserPreferences.tsx

@@ -3,13 +3,24 @@ import PropTypes from 'prop-types';
 import { Select, Typography, Button, HotkeysPreferences } from '../';
 import { useTranslation } from 'react-i18next';
 
-const UserPreferences = ({ availableLanguages, defaultLanguage, currentLanguage, disabled, hotkeyDefinitions, hotkeyDefaults, onCancel, onSubmit, onReset, hotkeysModule }) => {
+const UserPreferences = ({
+  availableLanguages,
+  defaultLanguage,
+  currentLanguage,
+  disabled,
+  hotkeyDefinitions,
+  hotkeyDefaults,
+  onCancel,
+  onSubmit,
+  onReset,
+  hotkeysModule,
+}) => {
   const { t } = useTranslation('UserPreferencesModal');
   const [state, setState] = useState({
     isDisabled: disabled,
     hotkeyErrors: {},
     hotkeyDefinitions,
-    language: currentLanguage
+    language: currentLanguage,
   });
 
   const onSubmitHandler = () => {
@@ -32,7 +43,7 @@ const UserPreferences = ({ availableLanguages, defaultLanguage, currentLanguage,
     onCancel();
   };
 
-  const onLanguageChangeHandler = (value) => {
+  const onLanguageChangeHandler = value => {
     setState(state => ({ ...state, language: value }));
   };
 
@@ -44,7 +55,7 @@ const UserPreferences = ({ availableLanguages, defaultLanguage, currentLanguage,
       hotkeyDefinitions: {
         ...state.hotkeyDefinitions,
         [id]: definition,
-      }
+      },
     }));
   };
 
@@ -53,14 +64,12 @@ const UserPreferences = ({ availableLanguages, defaultLanguage, currentLanguage,
       <div className="border-b-2 border-black mb-2">
         <Typography
           variant="h5"
-          className="flex flex-grow text-primary-light font-light pb-2"
+          className="flex grow text-primary-light font-light pb-2"
         >
           {title}
         </Typography>
       </div>
-      <div className="mt-4 mb-8">
+      <div className="mt-4 mb-8">{children}</div>
-        {children}
-      </div>
     </>
   );
 
@@ -89,17 +98,23 @@ const UserPreferences = ({ availableLanguages, defaultLanguage, currentLanguage,
         />
       </Section>
       <div className="flex flex-row justify-between">
-        <Button variant="outlined" onClick={onResetHandler} disabled={disabled}>
+        <Button
+          variant="outlined"
+          border="light"
+          onClick={onResetHandler}
+          disabled={disabled}
+        >
           {t('Reset to Defaults')}
         </Button>
         <div className="flex flex-row">
-          <Button variant="outlined" onClick={onCancelHandler}>
+          <Button variant="outlined" border="light" onClick={onCancelHandler}>
             {t('Cancel')}
           </Button>
           <Button
             variant="contained"
             disabled={state.isDisabled}
             color="light"
+            border="light"
             className="ml-2"
             onClick={onSubmitHandler}
           >
@@ -111,7 +126,7 @@ const UserPreferences = ({ availableLanguages, defaultLanguage, currentLanguage,
   );
 };
 
-const noop = () => { };
+const noop = () => {};
 
 UserPreferences.propTypes = {
   disabled: PropTypes.bool,
@@ -132,7 +147,7 @@ UserPreferences.propTypes = {
     unpause: PropTypes.func.isRequired,
     startRecording: PropTypes.func.isRequired,
     record: PropTypes.func.isRequired,
-  }).isRequired
+  }).isRequired,
 };
 
 UserPreferences.defaultProps = {
@@ -143,7 +158,7 @@ UserPreferences.defaultProps = {
   onCancel: noop,
   onSubmit: noop,
   onReset: noop,
-  disabled: false
+  disabled: false,
 };
 
 export default UserPreferences;

platform/ui/src/components/ViewportActionBar/ViewportActionBar.tsx

@@ -255,7 +255,7 @@ const ViewportActionBar = ({
       }}
       onDoubleClick={onDoubleClick}
     >
-      <div className="flex flex-1 flex-grow mt-2 min-w-48">
+      <div className="flex flex-1 grow mt-2 min-w-48">
         <div className="flex items-center">
           <span className="mr-2 text-white text-large">{label}</span>
           {showStatus && renderIconStatus()}
@@ -287,12 +287,14 @@ const ViewportActionBar = ({
             <Button
               size="initial"
               className="px-2 py-1 bg-black"
+              border="light"
               onClick={() => onSeriesChange('left')}
             >
               <Icon name="chevron-left" className="w-4 text-white" />
             </Button>
             <Button
               size="initial"
+              border="light"
               className="px-2 py-1 bg-black"
               onClick={() => onSeriesChange('right')}
             >

platform/ui/src/components/ViewportDownloadForm/ViewportDownloadForm.tsx

@@ -293,7 +293,7 @@ const ViewportDownloadForm = ({
         </div>
         <div className="flex">
           <div className="flex w-1/3">
-            <div className="flex flex-col flex-grow">
+            <div className="flex flex-col grow">
               <div className="w-full">
                 <Input
                   type="number"

platform/ui/tailwind.config.js

@@ -1,11 +1,5 @@
 module.exports = {
-  prefix: '',
+  content: ['./src/**/*.{jsx,js,ts,tsx,css,mdx}'],
-  important: false,
-  separator: ':',
-  purge: {
-    content: ['./src/**/*.{jsx,js,ts,tsx,css,mdx}'],
-    safelist: [],
-  },
   theme: {
     screens: {
       sm: '640px',

platform/viewer/package.json

@@ -91,7 +91,7 @@
     "identity-obj-proxy": "3.0.x",
     "lodash": "4.17.15",
     "glob": "^8.0.3",
-    "tailwindcss": "2.2.4",
+    "tailwindcss": "3.1.8",
     "terser-webpack-plugin": "^5.1.1",
     "webpack": "^5.50.0",
     "webpack-bundle-analyzer": "^4.4.2",

platform/viewer/src/routes/Local/Local.tsx

@@ -62,8 +62,8 @@ function Local() {
   const onDrop = async acceptedFiles => {
     const studies = await filesToStudies(acceptedFiles, dataSource);
     // Todo: navigate to work list and let user select a mode
-    let query = new URLSearchParams();
+    const query = new URLSearchParams();
-    studies.forEach(id=> query.append('StudyInstanceUIDs', id))
+    studies.forEach(id => query.append('StudyInstanceUIDs', id));
     navigate(`/viewer/dicomlocal?${decodeURIComponent(query.toString())}`);
   };
 
@@ -80,7 +80,7 @@ function Local() {
       {({ getRootProps }) => (
         <div {...getRootProps()} style={{ width: '100%', height: '100%' }}>
           <div className="h-screen w-screen flex justify-center items-center ">
-            <div className="py-8 px-8 mx-auto bg-secondary-dark shadow-md space-y-2 rounded-lg">
+            <div className="py-8 px-8 mx-auto bg-secondary-dark drop-shadow-md space-y-2 rounded-lg">
               <img
                 className="block mx-auto h-10"
                 src="./customLogo.svg"

platform/viewer/tailwind.config.js

@@ -1,18 +1,15 @@
+// Todo: we probably should add external installed extensions/modes here as well.
+
 module.exports = {
-  prefix: '',
+  content: [
-  important: false,
+    './src/**/*.{jsx,js,ts,tsx, css}',
-  separator: ':',
+    '../../extensions/**/*.{jsx,js,ts,tsx, css}',
-  purge: {
+    '../../modes/**/*.{jsx,js,ts,tsx, css}',
-    // Note: if you are writing an extension that uses Tailwind classes,
+    './node_modules/@ohif/ui/src/**/*.{js,jsx,ts,tsx, css}',
-    // you need to put it here so they are not purged in the production build
+    '../../node_modules/@ohif/ui/src/**/*.{js,jsx,ts,tsx,css}',
-    content: [
+    '../../node_modules/@ohif/ui/src/**/*.{js,jsx,ts,tsx,css}',
-      './src/**/*.{jsx,js,ts,tsx, css}',
+    '../../node_modules/@ohif/extension-*/src/**/*.{js,jsx,css, ts,tsx}',
-      './node_modules/@ohif/ui/src/**/*.{js,jsx,ts,tsx, css}',
+  ],
-      '../../node_modules/@ohif/ui/src/**/*.{js,jsx,ts,tsx,css}',
-      '../../node_modules/@ohif/ui/src/**/*.{js,jsx,ts,tsx,css}',
-      '../../node_modules/@ohif/extension-*/src/**/*.{js,jsx,css, ts,tsx}',
-    ],
-  },
   theme: {
     screens: {
       sm: '640px',

yarn.lock

@@ -3166,13 +3166,6 @@
     unique-filename "^1.1.1"
     which "^1.3.1"
 
-"@fullhuman/postcss-purgecss@^4.0.3":
-  version "4.1.3"
-  resolved "https://registry.yarnpkg.com/@fullhuman/postcss-purgecss/-/postcss-purgecss-4.1.3.tgz#e4eb21fc7a49257e4081c6a3a86b338618e61fce"
-  integrity sha512-jqcsyfvq09VOsMXxJMPLRF6Fhg/NNltzWKnC9qtzva+QKTxerCO4esG6je7hbnmkpZtaDyPTwMBj9bzfWorsrw==
-  dependencies:
-    purgecss "^4.1.3"
-
 "@gar/promisify@^1.0.1":
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.3.tgz#555193ab2e3bb3b6adc3d551c9c030d9e860daf6"
@@ -7183,6 +7176,11 @@ arg@^5.0.0:
   resolved "https://registry.yarnpkg.com/arg/-/arg-5.0.1.tgz#eb0c9a8f77786cad2af8ff2b862899842d7b6adb"
   integrity sha512-e0hDa9H2Z9AwFkk2qDlwhoMYE4eToKarchkQHovNdLTCYMHZHeRjI71crOh+dio4K6u1IcwubQqo79Ga4CyAQA==
 
+arg@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz#c81433cc427c92c4dcf4865142dbca6f15acd59c"
+  integrity sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==
+
 argparse@^1.0.7:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
@@ -8218,7 +8216,7 @@ bytes@3.0.0:
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"
   integrity sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw==
 
-bytes@3.1.2, bytes@^3.0.0:
+bytes@3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.2.tgz#8b0beeb98605adf1b128fa4386403c009e0221a5"
   integrity sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==
@@ -8881,7 +8879,7 @@ color-support@^1.1.2:
   resolved "https://registry.yarnpkg.com/color-support/-/color-support-1.1.3.tgz#93834379a1cc9a0c61f82f52f0d04322251bd5a2"
   integrity sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==
 
-color@^3.0.0, color@^3.1.3:
+color@^3.0.0:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/color/-/color-3.2.1.tgz#3544dc198caf4490c3ecc9a790b54fe9ff45e164"
   integrity sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==
@@ -8972,7 +8970,7 @@ commander@^7.0.0, commander@^7.2.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
   integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==
 
-commander@^8.0.0, commander@^8.3.0:
+commander@^8.3.0:
   version "8.3.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-8.3.0.tgz#4837ea1b2da67b9c616a67afbb0fafee567bca66"
   integrity sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==
@@ -9682,11 +9680,6 @@ css-tree@^1.1.2, css-tree@^1.1.3:
     mdn-data "2.0.14"
     source-map "^0.6.1"
 
-css-unit-converter@^1.1.1:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/css-unit-converter/-/css-unit-converter-1.1.2.tgz#4c77f5a1954e6dbff60695ecb214e3270436ab21"
-  integrity sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==
-
 css-what@^3.2.1:
   version "3.4.2"
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-3.4.2.tgz#ea7026fcb01777edbde52124e21f327e7ae950e4"
@@ -10386,9 +10379,9 @@ detect-port@^1.3.0:
     address "^1.0.1"
     debug "^2.6.0"
 
-detective@^5.2.0:
+detective@^5.2.1:
   version "5.2.1"
-  resolved "https://registry.yarnpkg.com/detective/-/detective-5.2.1.tgz#6af01eeda11015acb0e73f933242b70f24f91034"
+  resolved "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz#6af01eeda11015acb0e73f933242b70f24f91034"
   integrity sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==
   dependencies:
     acorn-node "^1.8.2"
@@ -10413,9 +10406,9 @@ dicomweb-client@^0.6.0:
   resolved "https://registry.yarnpkg.com/dicomweb-client/-/dicomweb-client-0.6.0.tgz#5e35ada52fe0155af1cc1f0e84f9c7f76477f92d"
   integrity sha512-VAkBg4W6odIo2XsFxqjN/rptd7bQ8oHpRuKH5d46E9BUIPzRschazE8Dx1xg7/l3N3f1M70jB7yJ339arAXiDQ==
 
-didyoumean@^1.2.1:
+didyoumean@^1.2.2:
   version "1.2.2"
-  resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.2.tgz#989346ffe9e839b4555ecf5666edea0d3e8ad037"
+  resolved "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz#989346ffe9e839b4555ecf5666edea0d3e8ad037"
   integrity sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==
 
 diff-sequences@^24.9.0:
@@ -11723,7 +11716,7 @@ fast-glob@^2.2.6:
     merge2 "^1.2.3"
     micromatch "^3.1.10"
 
-fast-glob@^3.0.3, fast-glob@^3.2.11, fast-glob@^3.2.5, fast-glob@^3.2.7, fast-glob@^3.2.9:
+fast-glob@^3.0.3, fast-glob@^3.2.11, fast-glob@^3.2.7, fast-glob@^3.2.9:
   version "3.2.11"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.11.tgz#a1172ad95ceb8a16e20caa5c5e56480e5129c1d9"
   integrity sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==
@@ -12180,7 +12173,7 @@ fs-constants@^1.0.0:
   resolved "https://registry.yarnpkg.com/fs-constants/-/fs-constants-1.0.0.tgz#6be0de9be998ce16af8afc24497b9ee9b7ccd9ad"
   integrity sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==
 
-fs-extra@^10.0.0, fs-extra@^10.1.0:
+fs-extra@^10.1.0:
   version "10.1.0"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-10.1.0.tgz#02873cfbc4084dde127eaa5f9905eef2325d1abf"
   integrity sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==
@@ -12504,7 +12497,7 @@ glob-parent@^5.0.0, glob-parent@^5.1.2, glob-parent@~5.1.2:
   dependencies:
     is-glob "^4.0.1"
 
-glob-parent@^6.0.0, glob-parent@^6.0.1:
+glob-parent@^6.0.1, glob-parent@^6.0.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-6.0.2.tgz#6d237d99083950c79290f24c7642a3de9a28f9e3"
   integrity sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==
@@ -12528,7 +12521,7 @@ glob-to-regexp@^0.4.1:
   resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz#c75297087c851b9a578bd217dd59a92f59fe546e"
   integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==
 
-glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6, glob@^7.1.7:
+glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6:
   version "7.2.3"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b"
   integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==
@@ -13733,6 +13726,13 @@ is-core-module@^2.1.0, is-core-module@^2.2.0, is-core-module@^2.5.0, is-core-mod
   dependencies:
     has "^1.0.3"
 
+is-core-module@^2.9.0:
+  version "2.10.0"
+  resolved "https://registry.npmjs.org/is-core-module/-/is-core-module-2.10.0.tgz#9012ede0a91c69587e647514e1d5277019e728ed"
+  integrity sha512-Erxj2n/LDAZ7H8WNJXd9tw38GYM3dv8rk8Zcs+jJuxYTW7sozH+SS8NtrSjVL1/vpLvWi1hxy96IzjJ3EHTJJg==
+  dependencies:
+    has "^1.0.3"
+
 is-data-descriptor@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz#0b5ee648388e2c860282e793f1856fec3f301b56"
@@ -15146,6 +15146,11 @@ lilconfig@^2.0.3, lilconfig@^2.0.5:
   resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.0.5.tgz#19e57fd06ccc3848fd1891655b5a447092225b25"
   integrity sha512-xaYmXZtTHPAw5m+xLN8ab9C+3a8YmV3asNSPOATITbtwrfbwaLJj8h66H1WMIpALCkqsIzK3h7oQ+PdX+LQ9Eg==
 
+lilconfig@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.6.tgz#32a384558bd58af3d4c6e077dd1ad1d397bc69d4"
+  integrity sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==
+
 lines-and-columns@^1.1.6:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
@@ -15421,11 +15426,6 @@ lodash.templatesettings@^4.0.0:
   dependencies:
     lodash._reinterpolate "^3.0.0"
 
-lodash.topath@^4.5.2:
-  version "4.5.2"
-  resolved "https://registry.yarnpkg.com/lodash.topath/-/lodash.topath-4.5.2.tgz#3616351f3bba61994a0931989660bd03254fd009"
-  integrity sha512-1/W4dM+35DwvE/iEd1M9ekewOSTlpFekhw9mhAtrwjVqUr83/ilQiyAvmg4tVX7Unkcfl1KC+i9WdaT4B6aQcg==
-
 lodash.truncate@^4.4.2:
   version "4.4.2"
   resolved "https://registry.yarnpkg.com/lodash.truncate/-/lodash.truncate-4.4.2.tgz#5a350da0b1113b837ecfffd5812cbe58d6eae193"
@@ -16134,11 +16134,6 @@ mkdirp@^0.5.1, mkdirp@^0.5.3, mkdirp@^0.5.5, mkdirp@~0.5.1:
   dependencies:
     minimist "^1.2.6"
 
-modern-normalize@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/modern-normalize/-/modern-normalize-1.1.0.tgz#da8e80140d9221426bd4f725c6e11283d34f90b7"
-  integrity sha512-2lMlY1Yc1+CUy0gw4H95uNN7vjbpoED7NNRSBHE25nWfLBdmMzFCsPshlzbxHz+gYMcBEUN8V4pU16prcdPSgA==
-
 modify-values@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/modify-values/-/modify-values-1.0.1.tgz#b3939fa605546474e3e3e3c63d64bd43b4ee6022"
@@ -16360,7 +16355,7 @@ node-domexception@^1.0.0:
   resolved "https://registry.yarnpkg.com/node-domexception/-/node-domexception-1.0.0.tgz#6888db46a1f71c0b76b3f7555016b63fe64766e5"
   integrity sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==
 
-node-emoji@^1.10.0, node-emoji@^1.8.1:
+node-emoji@^1.10.0:
   version "1.11.0"
   resolved "https://registry.yarnpkg.com/node-emoji/-/node-emoji-1.11.0.tgz#69a0150e6946e2f115e9d7ea4df7971e2628301c"
   integrity sha512-wo2DpQkQp7Sjm2A0cq+sN7EHKO6Sl0ctXeBdFZrL9T9+UywORbufTcTZxom8YqpLQt/FqNMUkOpkZrJVYSKD3A==
@@ -16704,10 +16699,10 @@ object-hash@2.1.1:
   resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-2.1.1.tgz#9447d0279b4fcf80cff3259bf66a1dc73afabe09"
   integrity sha512-VOJmgmS+7wvXf8CjbQmimtCnEx3IAoLxI3fp2fbWehxrWBcAQFbk+vcwb6vzR0VZv/eNCJ/27j151ZTwqW/JeQ==
 
-object-hash@^2.2.0:
+object-hash@^3.0.0:
-  version "2.2.0"
+  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-2.2.0.tgz#5ad518581eefc443bd763472b8ff2e9c2c0d54a5"
+  resolved "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz#73f97f753e7baffc0e2cc9d6e079079744ac82e9"
-  integrity sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==
+  integrity sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==
 
 object-inspect@^1.12.0, object-inspect@^1.9.0:
   version "1.12.2"
@@ -17806,7 +17801,7 @@ postcss-image-set-function@^4.0.6:
   dependencies:
     postcss-value-parser "^4.2.0"
 
-postcss-import@^14.0.2:
+postcss-import@^14.0.2, postcss-import@^14.1.0:
   version "14.1.0"
   resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-14.1.0.tgz#a7333ffe32f0b8795303ee9e40215dac922781f0"
   integrity sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==
@@ -17820,13 +17815,12 @@ postcss-initial@^4.0.1:
   resolved "https://registry.yarnpkg.com/postcss-initial/-/postcss-initial-4.0.1.tgz#529f735f72c5724a0fb30527df6fb7ac54d7de42"
   integrity sha512-0ueD7rPqX8Pn1xJIjay0AZeIuDoF+V+VvMt/uOnn+4ezUKhZM/NokDeP6DwMNyIoYByuN/94IQnt5FEkaN59xQ==
 
-postcss-js@^3.0.3:
+postcss-js@^4.0.0:
-  version "3.0.3"
+  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-3.0.3.tgz#2f0bd370a2e8599d45439f6970403b5873abda33"
+  resolved "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.0.tgz#31db79889531b80dc7bc9b0ad283e418dce0ac00"
-  integrity sha512-gWnoWQXKFw65Hk/mi2+WTQTHdPD5UJdDXZmX073EY/B3BWnYjO4F4t0VneTCnCGQ5E5GsCdMkzPaTXwl3r5dJw==
+  integrity sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==
   dependencies:
     camelcase-css "^2.0.1"
-    postcss "^8.1.6"
 
 postcss-lab-function@^4.2.0:
   version "4.2.0"
@@ -17836,9 +17830,9 @@ postcss-lab-function@^4.2.0:
     "@csstools/postcss-progressive-custom-properties" "^1.1.0"
     postcss-value-parser "^4.2.0"
 
-postcss-load-config@^3.1.0:
+postcss-load-config@^3.1.4:
   version "3.1.4"
-  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-3.1.4.tgz#1ab2571faf84bb078877e1d07905eabe9ebda855"
+  resolved "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz#1ab2571faf84bb078877e1d07905eabe9ebda855"
   integrity sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==
   dependencies:
     lilconfig "^2.0.5"
@@ -18064,12 +18058,12 @@ postcss-modules-values@^4.0.0:
   dependencies:
     icss-utils "^5.0.0"
 
-postcss-nested@5.0.5:
+postcss-nested@5.0.6:
-  version "5.0.5"
+  version "5.0.6"
-  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-5.0.5.tgz#f0a107d33a9fab11d7637205f5321e27223e3603"
+  resolved "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.6.tgz#466343f7fc8d3d46af3e7dba3fcd47d052a945bc"
-  integrity sha512-GSRXYz5bccobpTzLQZXOnSOfKl6TwVr5CyAQJUPub4nuRJSOECK5AqurxVgmtxP48p0Kc/ndY/YyS1yqldX0Ew==
+  integrity sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==
   dependencies:
-    postcss-selector-parser "^6.0.4"
+    postcss-selector-parser "^6.0.6"
 
 postcss-nesting@^10.1.7:
   version "10.1.7"
@@ -18433,7 +18427,7 @@ postcss-unique-selectors@^5.1.1:
   dependencies:
     postcss-selector-parser "^6.0.5"
 
-postcss-value-parser@^3.0.0, postcss-value-parser@^3.3.0:
+postcss-value-parser@^3.0.0:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
   integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
@@ -18456,7 +18450,7 @@ postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.26, postcss@^7.0.2
     picocolors "^0.2.1"
     source-map "^0.6.1"
 
-postcss@^8.1.6, postcss@^8.2.15, postcss@^8.3.11, postcss@^8.3.5, postcss@^8.4.13, postcss@^8.4.7:
+postcss@^8.2.15, postcss@^8.3.11, postcss@^8.3.5, postcss@^8.4.13, postcss@^8.4.7:
   version "8.4.14"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.14.tgz#ee9274d5622b4858c1007a74d76e42e56fd21caf"
   integrity sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==
@@ -18825,16 +18819,6 @@ pure-color@^1.2.0:
   resolved "https://registry.yarnpkg.com/pure-color/-/pure-color-1.3.0.tgz#1fe064fb0ac851f0de61320a8bf796836422f33e"
   integrity sha1-H+Bk+wrIUfDeYTIKi/eWg2Qi8z4=
 
-purgecss@^4.1.3:
-  version "4.1.3"
-  resolved "https://registry.yarnpkg.com/purgecss/-/purgecss-4.1.3.tgz#683f6a133c8c4de7aa82fe2746d1393b214918f7"
-  integrity sha512-99cKy4s+VZoXnPxaoM23e5ABcP851nC2y2GROkkjS8eJaJtlciGavd7iYAw2V84WeBqggZ12l8ef44G99HmTaw==
-  dependencies:
-    commander "^8.0.0"
-    glob "^7.1.7"
-    postcss "^8.3.5"
-    postcss-selector-parser "^6.0.6"
-
 q@^1.1.2, q@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
@@ -19639,14 +19623,6 @@ redent@^3.0.0:
     indent-string "^4.0.0"
     strip-indent "^3.0.0"
 
-reduce-css-calc@^2.1.8:
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-2.1.8.tgz#7ef8761a28d614980dc0c982f772c93f7a99de03"
-  integrity sha512-8liAVezDmUcH+tdzoEGrhfbGcP7nOV4NkGE3a74+qqvE7nt9i4sKLGBuZNOnpI4WiGksiNPklZxva80061QiPg==
-  dependencies:
-    css-unit-converter "^1.1.1"
-    postcss-value-parser "^3.3.0"
-
 redux@^4.0.5:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/redux/-/redux-4.2.0.tgz#46f10d6e29b6666df758780437651eeb2b969f13"
@@ -20080,6 +20056,15 @@ resolve@^1.1.6, resolve@^1.1.7, resolve@^1.10.0, resolve@^1.10.1, resolve@^1.12.
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
+resolve@^1.22.1:
+  version "1.22.1"
+  resolved "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz#27cb2ebb53f91abb49470a928bba7558066ac177"
+  integrity sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==
+  dependencies:
+    is-core-module "^2.9.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
 resolve@^2.0.0-next.3:
   version "2.0.0-next.3"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-2.0.0-next.3.tgz#d41016293d4a8586a39ca5d9b5f15cbea1f55e46"
@@ -21547,42 +21532,33 @@ table@^6.0.9:
     string-width "^4.2.3"
     strip-ansi "^6.0.1"
 
-tailwindcss@2.2.4:
+tailwindcss@3.1.8:
-  version "2.2.4"
+  version "3.1.8"
-  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-2.2.4.tgz#6a2e259b1e26125aeaa7cdc479963fd217c308b0"
+  resolved "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.8.tgz#4f8520550d67a835d32f2f4021580f9fddb7b741"
-  integrity sha512-OdBCPgazNNsknSP+JfrPzkay9aqKjhKtFhbhgxHgvEFdHy/GuRPo2SCJ4w1SFTN8H6FPI4m6qD/Jj20NWY1GkA==
+  integrity sha512-YSneUCZSFDYMwk+TGq8qYFdCA3yfBRdBlS7txSq0LUmzyeqRe3a8fBQzbz9M3WS/iFT4BNf/nmw9mEzrnSaC0g==
   dependencies:
-    "@fullhuman/postcss-purgecss" "^4.0.3"
+    arg "^5.0.2"
-    arg "^5.0.0"
+    chokidar "^3.5.3"
-    bytes "^3.0.0"
+    color-name "^1.1.4"
-    chalk "^4.1.1"
+    detective "^5.2.1"
-    chokidar "^3.5.2"
+    didyoumean "^1.2.2"
-    color "^3.1.3"
-    cosmiconfig "^7.0.0"
-    detective "^5.2.0"
-    didyoumean "^1.2.1"
     dlv "^1.1.3"
-    fast-glob "^3.2.5"
+    fast-glob "^3.2.11"
-    fs-extra "^10.0.0"
+    glob-parent "^6.0.2"
-    glob-parent "^6.0.0"
+    is-glob "^4.0.3"
-    html-tags "^3.1.0"
+    lilconfig "^2.0.6"
-    is-glob "^4.0.1"
-    lodash "^4.17.21"
-    lodash.topath "^4.5.2"
-    modern-normalize "^1.1.0"
-    node-emoji "^1.8.1"
     normalize-path "^3.0.0"
-    object-hash "^2.2.0"
+    object-hash "^3.0.0"
-    postcss-js "^3.0.3"
+    picocolors "^1.0.0"
-    postcss-load-config "^3.1.0"
+    postcss "^8.4.14"
-    postcss-nested "5.0.5"
+    postcss-import "^14.1.0"
-    postcss-selector-parser "^6.0.6"
+    postcss-js "^4.0.0"
-    postcss-value-parser "^4.1.0"
+    postcss-load-config "^3.1.4"
-    pretty-hrtime "^1.0.3"
+    postcss-nested "5.0.6"
+    postcss-selector-parser "^6.0.10"
+    postcss-value-parser "^4.2.0"
     quick-lru "^5.1.1"
-    reduce-css-calc "^2.1.8"
+    resolve "^1.22.1"
-    resolve "^1.20.0"
-    tmp "^0.2.1"
 
 tapable@^1.0.0, tapable@^1.1.3:
   version "1.1.3"
@@ -21893,7 +21869,7 @@ tmp@^0.0.33:
   dependencies:
     os-tmpdir "~1.0.2"
 
-tmp@^0.2.1, tmp@~0.2.1:
+tmp@~0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.1.tgz#8457fc3037dcf4719c251367a1af6500ee1ccf14"
   integrity sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==