Use tailwind

studio/components/layouts/SQLEditorLayout/QueryItem.tsx

@@ -119,7 +119,7 @@ const QueryItemActions = observer(({ tabInfo, activeId }: QueryItemActionsProps)
   }
 
   return (
-    <div className="group sql-snippet-queryitem-dropdown">
+    <div className="group [div&>button[data-state='open']>span]:text-scale-900">
       {IS_PLATFORM ? (
         <Dropdown
           side="bottom"
@@ -138,7 +138,7 @@ const QueryItemActions = observer(({ tabInfo, activeId }: QueryItemActionsProps)
         >
           <span
             className={clsx(
-              'p-0.5 rounded-md ',
+              'p-0.5 rounded-md',
               isActive
                 ? 'text-scale-1100 hover:bg-scale-800'
                 : 'text-scale-300 dark:text-scale-200 hover:bg-scale-500 group-hover:text-scale-1100'

studio/styles/main.scss

@@ -238,15 +238,3 @@ div[data-radix-portal]:not(.portal--toast) {
 [data-radix-popper-content-wrapper] {
   @apply z-50 #{!important};
 }
-
-// Dropdowns on SQL Snippets
-// can't quite target this properly with Tailwind
-.sql-snippet-queryitem-dropdown {
-  button[data-state='open'] {
-    @apply bg-scale-400 text-scale-900;
-
-    svg {
-      @apply stroke-scale-900;
-    }
-  }
-}