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

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();
-    studies.forEach(id=> query.append('StudyInstanceUIDs', id))
+    const query = new URLSearchParams();
+    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: '',
-  important: false,
-  separator: ':',
-  purge: {
-    // Note: if you are writing an extension that uses Tailwind classes,
-    // you need to put it here so they are not purged in the production build
-    content: [
-      './src/**/*.{jsx,js,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/ui/src/**/*.{js,jsx,ts,tsx,css}',
-      '../../node_modules/@ohif/extension-*/src/**/*.{js,jsx,css, ts,tsx}',
-    ],
-  },
+  content: [
+    './src/**/*.{jsx,js,ts,tsx, css}',
+    '../../extensions/**/*.{jsx,js,ts,tsx, css}',
+    '../../modes/**/*.{jsx,js,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/ui/src/**/*.{js,jsx,ts,tsx,css}',
+    '../../node_modules/@ohif/extension-*/src/**/*.{js,jsx,css, ts,tsx}',
+  ],
   theme: {
     screens: {
       sm: '640px',