diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 000000000..1689524c2
--- /dev/null
+++ b/.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}"
+    }
+  ]
+}
diff --git a/extensions/default/src/ViewerLayout/index.jsx b/extensions/default/src/ViewerLayout/index.jsx
index faf208b13..06e710dd7 100644
--- a/extensions/default/src/ViewerLayout/index.jsx
+++ b/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 */}
diff --git a/platform/docs/docs/platform/component-library/components/SidePanel.mdx b/platform/docs/docs/platform/component-library/components/SidePanel.mdx
index 822187d67..646006ee1 100644
--- a/platform/docs/docs/platform/component-library/components/SidePanel.mdx
+++ b/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'} />)``
diff --git a/platform/docs/docs/platform/component-library/example-views/Viewer.mdx.todo b/platform/docs/docs/platform/component-library/example-views/Viewer.mdx.todo
index 2420b44a4..5fb148455 100644
--- a/platform/docs/docs/platform/component-library/example-views/Viewer.mdx.todo
+++ b/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 */}
diff --git a/platform/ui/.webpack/webpack.prod.js b/platform/ui/.webpack/webpack.prod.js
index 32d99604c..381727468 100644
--- a/platform/ui/.webpack/webpack.prod.js
+++ b/platform/ui/.webpack/webpack.prod.js
@@ -24,8 +24,8 @@ module.exports = (env, argv) => {
       warnings: true,
     },
     optimization: {
-      minimize: false,
-      sideEffects: false,
+      minimize: true,
+      sideEffects: true,
     },
     output: {
       path: ROOT_DIR,
diff --git a/platform/ui/package.json b/platform/ui/package.json
index db9f6361c..7ae7aa8b4 100644
--- a/platform/ui/package.json
+++ b/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",
diff --git a/platform/ui/src/components/DateRange/DateRange.css b/platform/ui/src/components/DateRange/DateRange.css
index f310fb167..4529762f3 100644
--- a/platform/ui/src/components/DateRange/DateRange.css
+++ b/platform/ui/src/components/DateRange/DateRange.css
@@ -1,6 +1,3 @@
-/*@tailwind base;
-@tailwind utilities;*/
-
 /** CONTAINER STYLES **/
 
 .DateRangePickerInput {
diff --git a/platform/ui/src/components/HotkeysPreferences/HotkeysPreferences.jsx b/platform/ui/src/components/HotkeysPreferences/HotkeysPreferences.jsx
index 08129cc21..c76d69a61 100644
--- a/platform/ui/src/components/HotkeysPreferences/HotkeysPreferences.jsx
+++ b/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>
diff --git a/platform/ui/src/components/WindowLevelMenuItem/WindowLevelMenuItem.jsx b/platform/ui/src/components/WindowLevelMenuItem/WindowLevelMenuItem.jsx
index b4ab50691..ff479568e 100644
--- a/platform/ui/src/components/WindowLevelMenuItem/WindowLevelMenuItem.jsx
+++ b/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>
   </>
 );
diff --git a/platform/ui/src/views/Viewer/Viewer.js b/platform/ui/src/views/Viewer/Viewer.js
index 706e427a2..884b8d03c 100644
--- a/platform/ui/src/views/Viewer/Viewer.js
+++ b/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
diff --git a/platform/ui/tailwind.config.js b/platform/ui/tailwind.config.js
index c85ca4d19..2b94372ad 100644
--- a/platform/ui/tailwind.config.js
+++ b/platform/ui/tailwind.config.js
@@ -828,8 +828,4 @@ module.exports = {
   },
   corePlugins: {},
   plugins: [],
-  future: {
-    purgeLayersByDefault: true,
-    standardFontWeights: true,
-  },
 };
diff --git a/platform/viewer/.webpack/webpack.pwa.js b/platform/viewer/.webpack/webpack.pwa.js
index 3271de51a..6746e39fc 100644
--- a/platform/viewer/.webpack/webpack.pwa.js
+++ b/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: [