diff --git a/package-lock.json b/package-lock.json
index dd7c38b9..f0f7da93 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -91,7 +91,6 @@
         "simple-git": "^3.10.0",
         "style-loader": "2.0.0",
         "tailwindcss": "^3.2.4",
-        "tailwindcss-scoped-groups": "^2.0.0",
         "ts-loader": "^9.4.2",
         "typescript": "^4.6.2",
         "uniforms": "^3.7.0",
@@ -10431,15 +10430,6 @@
         "postcss": "^8.0.9"
       }
     },
-    "node_modules/tailwindcss-scoped-groups": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/tailwindcss-scoped-groups/-/tailwindcss-scoped-groups-2.0.0.tgz",
-      "integrity": "sha512-uE9PJzfjqzsKlZ0dUjG5yPwBmkEZ/qmrXMLjykRs0otolUHAIclbtV49JQGyeYLo8YA7WPMgzKOg2e4snVyHqw==",
-      "dev": true,
-      "peerDependencies": {
-        "tailwindcss": ">=3"
-      }
-    },
     "node_modules/tailwindcss/node_modules/color-name": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
@@ -18948,13 +18938,6 @@
         }
       }
     },
-    "tailwindcss-scoped-groups": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/tailwindcss-scoped-groups/-/tailwindcss-scoped-groups-2.0.0.tgz",
-      "integrity": "sha512-uE9PJzfjqzsKlZ0dUjG5yPwBmkEZ/qmrXMLjykRs0otolUHAIclbtV49JQGyeYLo8YA7WPMgzKOg2e4snVyHqw==",
-      "dev": true,
-      "requires": {}
-    },
     "tapable": {
       "version": "1.1.3",
       "dev": true
diff --git a/package.json b/package.json
index c27d5cf3..c3194b6c 100644
--- a/package.json
+++ b/package.json
@@ -2287,7 +2287,6 @@
     "simple-git": "^3.10.0",
     "style-loader": "2.0.0",
     "tailwindcss": "^3.2.4",
-    "tailwindcss-scoped-groups": "^2.0.0",
     "ts-loader": "^9.4.2",
     "typescript": "^4.6.2",
     "uniforms": "^3.7.0",
diff --git a/src/dashboardWebView/components/Contents/ContentActions.tsx b/src/dashboardWebView/components/Contents/ContentActions.tsx
index 281224da..2b68e839 100644
--- a/src/dashboardWebView/components/Contents/ContentActions.tsx
+++ b/src/dashboardWebView/components/Contents/ContentActions.tsx
@@ -84,17 +84,17 @@ export const ContentActions: React.FunctionComponent<IContentActionsProps> = ({
     <>
       <div
         className={`${
-          listView ? '' : 'group-scoped absolute top-6 right-0'
+          listView ? '' : 'group/card absolute top-6 right-0'
         } flex flex-col space-y-4`}
       >
         <div
-          className={`flex items-center border border-transparent group-scoped-hover:bg-gray-200 dark:group-scoped-hover:bg-vulcan-200 group-scoped-hover:border-gray-100 dark:group-scoped-hover:border-vulcan-50 rounded-full ${
+          className={`flex items-center border border-transparent group-hover/card:bg-gray-200 dark:group-hover/card:bg-vulcan-200 group-hover/card:border-gray-100 dark:group-hover/card:border-vulcan-50 rounded-full ${
             listView ? '' : 'p-2 -mt-4'
           }`}
         >
           <Menu as="div" className={`relative flex text-left ${listView ? '' : 'z-10'}`}>
             {!listView && (
-              <div className="hidden group-scoped-hover:flex">
+              <div className="hidden group-hover/card:flex">
                 <QuickAction title={`View content`} onClick={onView}>
                   <EyeIcon className={`w-4 h-4`} aria-hidden="true" />
                 </QuickAction>
diff --git a/src/dashboardWebView/components/Media/Item.tsx b/src/dashboardWebView/components/Media/Item.tsx
index 0efb1493..6a55fa6f 100644
--- a/src/dashboardWebView/components/Media/Item.tsx
+++ b/src/dashboardWebView/components/Media/Item.tsx
@@ -422,7 +422,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
     <>
       <li className="group relative bg-gray-50 dark:bg-vulcan-200 shadow-md hover:shadow-xl dark:shadow-none dark:hover:bg-vulcan-100 border border-gray-200 dark:border-vulcan-50">
         <button
-          className={`group-scoped relative bg-gray-200 dark:bg-vulcan-300 block w-full aspect-w-10 aspect-h-7 overflow-hidden  h-48 ${
+          className={`group/button relative bg-gray-200 dark:bg-vulcan-300 block w-full aspect-w-10 aspect-h-7 overflow-hidden  h-48 ${
             isImageFile ? 'cursor-pointer' : 'cursor-default'
           }`}
           onClick={hasViewData ? undefined : openLightbox}
@@ -439,7 +439,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
           </div>
           {hasViewData && (
             <div
-              className={`hidden group-scoped-hover:flex absolute top-0 right-0 bottom-0 left-0 items-center bg-vulcan-500 bg-opacity-70 justify-center`}
+              className={`hidden group-hover/button:flex absolute top-0 right-0 bottom-0 left-0 items-center bg-vulcan-500 bg-opacity-70 justify-center`}
             >
               <div
                 className={`h-full ${
@@ -472,10 +472,10 @@ export const Item: React.FunctionComponent<IItemProps> = ({
           )}
         </button>
         <div className={`relative py-4 pl-4 pr-12`}>
-          <div className={`group-scoped absolute top-4 right-4 flex flex-col space-y-4`}>
-            <div className="flex items-center border border-transparent group-scoped-hover:bg-gray-200 dark:group-scoped-hover:bg-vulcan-200 group-scoped-hover:border-gray-100 dark:group-scoped-hover:border-vulcan-50 rounded-full p-2 -mr-2 -mt-2">
+          <div className={`group/actions absolute top-4 right-4 flex flex-col space-y-4`}>
+            <div className="flex items-center border border-transparent group-hover/actions:bg-gray-200 dark:group-hover/actions:bg-vulcan-200 group-hover/actions:border-gray-100 dark:group-hover/actions:border-vulcan-50 rounded-full p-2 -mr-2 -mt-2">
               <Menu as="div" className="relative z-10 flex text-left">
-                <div className="hidden group-scoped-hover:flex">
+                <div className="hidden group-hover/actions:flex">
                   <QuickAction title="View media details" onClick={viewMediaDetails}>
                     <EyeIcon className={`w-4 h-4`} aria-hidden="true" />
                   </QuickAction>
diff --git a/tailwind.config.js b/tailwind.config.js
index 0d0dd293..0b5d0d8b 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -120,6 +120,5 @@ module.exports = {
   },
   plugins: [
     require("@tailwindcss/forms"),
-    require("tailwindcss-scoped-groups"),
   ],
 }