ledger gemory draft

src/components/Dropdown.vue

@@ -17,13 +17,21 @@ useEventListener('keyup', e => {
     <div class="dropdown" :class="{'dropdown-open': isOpen, 'dropdown-close': !isOpen}" v-on-click-outside="() => isOpen = false">
         <button @click="isOpen = !isOpen">
             <slot name="button" />
-            <Transition name="flip">
+            <Transition
+                enter-active-class="transition-transform"
+                enter-from-class="rotate-180"
+                leave-active-class="hidden"
+                leave-to-class="rotate-180">
                 <ChevronDownIcon v-if="!isOpen" class="chevron" />
                 <ChevronUpIcon v-else class="chevron" />
             </Transition>
         </button>
 
-        <Transition name="fade">
+        <Transition
+            enter-active-class="transition-opacity"
+            enter-from-class="opacity-0"
+            leave-from-class="transition-opacity"
+            leave-to-class="opacity-0">
             <div v-if="isOpen" class="relative">
                 <div class="z-10 divide-y rounded-b-md absolute">
                     <slot />
@@ -33,27 +41,10 @@ useEventListener('keyup', e => {
     </div>
 </template>
 
-<style scoped lang="postcss">
+<style scoped>
+@reference "tailwindcss";
+
 .chevron {
     @apply w-4 h-4 ms-1;
 }
-
-.fade-enter-from, .fade-leave-to {
-  opacity: 0;
-}
-
-.fade-enter-active, .fade-leave-active {
-    @apply transition-opacity;
-}
-
-.flip-enter-from, .flip-leave-to {
-  transform: rotate(180deg);
-}
-
-.flip-enter-active {
-  @apply transition-transform;
-}
-.flip-leave-active {
-   display: none; 
-}
 </style>