fix(tailwind): Missed some changes when upgrading to tailwind 2.x

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "pwa-chrome",
+      "request": "launch",
+      "name": "Launch Chrome against localhost",
+      "url": "http://localhost:3000",
+      "webRoot": "${workspaceFolder}"
+    }
+  ]
+}

extensions/default/src/ViewerLayout/index.jsx

@@ -189,7 +189,7 @@ function ViewerLayout({
         </ErrorBoundary>
       </Header>
       <div
-        className="flex flex-row flex-no-wrap items-stretch w-full overflow-hidden"
+        className="flex flex-row flex-nowrap items-stretch w-full overflow-hidden"
         style={{ height: 'calc(100vh - 52px' }}
       >
         {/* LEFT SIDEPANELS */}

platform/docs/docs/platform/component-library/components/SidePanel.mdx

@@ -18,7 +18,7 @@ import { SidePanel } from '@ohif/ui';
 
 ```jsx live
 <div
-  className="flex flex-row flex-no-wrap flex-1 items-stretch overflow-hidden w-full"
+  className="flex flex-row flex-nowrap flex-1 items-stretch overflow-hidden w-full"
   style={{ height: '500px' }}
 >
   <SidePanel
@@ -43,7 +43,7 @@ import { SidePanel } from '@ohif/ui';
 
 ```jsx live
 <div
-  className="flex flex-row flex-no-wrap flex-1 items-stretch overflow-hidden w-full"
+  className="flex flex-row flex-nowrap flex-1 items-stretch overflow-hidden w-full"
   style={{ height: '500px' }}
 >
   <SidePanel
@@ -81,4 +81,4 @@ import { SidePanel } from '@ohif/ui';
 
 ## Properties
 
-(<ComponentPropsTable componentName={'SidePanel'} />)````
+(<ComponentPropsTable componentName={'SidePanel'} />)``

platform/docs/docs/platform/component-library/example-views/Viewer.mdx.todo

@@ -56,7 +56,7 @@ import { tabs } from './studyBrowserMockData';
       <DragAndDropProvider>
         <Header />
         <div
-          className="flex flex-row flex-no-wrap items-stretch overflow-hidden w-full"
+          className="flex flex-row flex-nowrap items-stretch overflow-hidden w-full"
           style={{ height: 'calc(100vh - 52px' }}
         >
           {/* LEFT SIDEPANELS */}

platform/ui/.webpack/webpack.prod.js

@@ -24,8 +24,8 @@ module.exports = (env, argv) => {
       warnings: true,
     },
     optimization: {
-      minimize: false,
+      minimize: true,
-      sideEffects: false,
+      sideEffects: true,
     },
     output: {
       path: ROOT_DIR,

platform/ui/package.json

@@ -45,7 +45,6 @@
   },
   "devDependencies": {
     "autoprefixer": "9.7.4",
-    "mini-css-extract-plugin": "^2.1.0",
     "postcss": "^8.3.5",
     "postcss-loader": "^6.1.1",
     "prop-types": "15.7.2",

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

@@ -1,6 +1,3 @@
-/*@tailwind base;
-@tailwind utilities;*/
-
 /** CONTAINER STYLES **/
 
 .DateRangePickerInput {

platform/ui/src/components/HotkeysPreferences/HotkeysPreferences.jsx

@@ -66,7 +66,7 @@ const HotkeysPreferences = ({ disabled, hotkeyDefinitions, errors: controlledErr
                       </Typography>
                         <Typography
                           variant='subtitle'
-                          className={classNames('pr-6 h-full flex flex-row items-center whitespace-no-wrap', isFirst && 'mt-5')}>
+                          className={classNames('pr-6 h-full flex flex-row items-center whitespace-nowrap', isFirst && 'mt-5')}>
                           {definition.label}
                         </Typography>
                       </div>

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

@@ -9,13 +9,13 @@ const WindowLevelMenuItem = ({ title, subtitle, isSelected, index }) => (
       isSelected && 'bg-primary-dark'
     )}
     >
-      <span className='text-common-bright mr-2 text-base whitespace-no-wrap'>
+      <span className='text-common-bright mr-2 text-base whitespace-nowrap'>
         {title}
       </span>
-      <span className='flex-1 text-aqua-pale font-light text-sm whitespace-no-wrap'>
+      <span className='flex-1 text-aqua-pale font-light text-sm whitespace-nowrap'>
         {subtitle}
       </span>
-      <span className='text-primary-active ml-5 text-sm whitespace-no-wrap'>{index + 1}</span>
+      <span className='text-primary-active ml-5 text-sm whitespace-nowrap'>{index + 1}</span>
     </div>
   </>
 );

platform/ui/src/views/Viewer/Viewer.js

@@ -10,7 +10,7 @@ const Viewer = () => {
       <div>
         <Header />
         <div
-          className="flex flex-row flex-no-wrap items-stretch flex-1 w-full overflow-hidden"
+          className="flex flex-row flex-nowrap items-stretch flex-1 w-full overflow-hidden"
           style={{ height: 'calc(100vh - 52px' }}
         >
           <SidePanel

platform/ui/tailwind.config.js

@@ -828,8 +828,4 @@ module.exports = {
   },
   corePlugins: {},
   plugins: [],
-  future: {
-    purgeLayersByDefault: true,
-    standardFontWeights: true,
-  },
 };

platform/viewer/.webpack/webpack.pwa.js

@@ -36,6 +36,13 @@ module.exports = (env, argv) => {
       path: DIST_DIR,
       filename: isProdBuild ? '[name].bundle.[chunkhash].js' : '[name].js',
       publicPath: PUBLIC_URL, // Used by HtmlWebPackPlugin for asset prefix
+      devtoolModuleFilenameTemplate: function(info) {
+        if (isProdBuild) {
+          return `webpack:///${info.resourcePath}`;
+        } else {
+          return 'file:///' + encodeURI(info.absoluteResourcePath);
+        }
+      },
     },
     resolve: {
       modules: [