fix(tailwind): Ensure tailwind properly purges unused utility classes (#2485)

extensions/cornerstone/src/ViewportLoadingIndicator.js

@@ -7,7 +7,7 @@ const ViewportLoadingIndicator = ({ error }) => {
     return (
       <>
         <div className="bg-black h-full w-full absolute opacity-50"></div>
-        <div className="text-primary-light text-xl font-thin">
+        <div className="text-primary-light text-xl font-light">
           <h4>Error Loading Image</h4>
           <p>An error has occurred.</p>
           <p>{error.message}</p>
@@ -20,9 +20,7 @@ const ViewportLoadingIndicator = ({ error }) => {
     <>
       <div className="bg-black h-full w-full absolute opacity-50"></div>
       <div className="absolute transparent w-full h-full flex items-center justify-center">
-        <p className="text-primary-light text-xl font-thin">
-          Loading...
-      </p>
+        <p className="text-primary-light text-xl font-light">Loading...</p>
       </div>
     </>
   );

extensions/cornerstone/src/ViewportOverlay.js

@@ -32,36 +32,48 @@ const ViewportOverlay = ({
 
   return (
     <div className="text-primary-light">
-      <div data-cy={"viewport-overlay-top-left"} className={classnames(overlay, topLeft)}>
+      <div
+        data-cy={'viewport-overlay-top-left'}
+        className={classnames(overlay, topLeft)}
+      >
         {isZoomActive && (
           <div className="flex flex-row">
             <span className="mr-1">Zoom:</span>
-            <span className="font-thin">{scale.toFixed(2)}x</span>
+            <span className="font-light">{scale.toFixed(2)}x</span>
           </div>
         )}
         {isWwwcActive && (
           <div className="flex flex-row">
             <span className="mr-1">W:</span>
-            <span className="ml-1 mr-2 font-thin">
+            <span className="ml-1 mr-2 font-light">
               {windowWidth.toFixed(0)}
             </span>
             <span className="mr-1">L:</span>
-            <span className="ml-1 font-thin">{windowCenter.toFixed(0)}</span>
+            <span className="ml-1 font-light">{windowCenter.toFixed(0)}</span>
           </div>
         )}
       </div>
-      <div data-cy={"viewport-overlay-top-right"} className={classnames(overlay, topRight)}>
+      <div
+        data-cy={'viewport-overlay-top-right'}
+        className={classnames(overlay, topRight)}
+      >
         {stackSize > 1 && (
           <div className="flex flex-row">
             <span className="mr-1">I:</span>
-            <span className="font-thin">
+            <span className="font-light">
               {`${instanceNumber} (${imageIndex}/${stackSize})`}
             </span>
           </div>
         )}
       </div>
-      <div data-cy={"viewport-overlay-bottom-right"} className={classnames(overlay, bottomRight)}></div>
-      <div data-cy={"viewport-overlay-bottom-left"} className={classnames(overlay, bottomLeft)}></div>
+      <div
+        data-cy={'viewport-overlay-bottom-right'}
+        className={classnames(overlay, bottomRight)}
+      ></div>
+      <div
+        data-cy={'viewport-overlay-bottom-left'}
+        className={classnames(overlay, bottomLeft)}
+      ></div>
     </div>
   );
 };