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>

src/components/Modal.vue

@@ -34,7 +34,8 @@ useEventListener('keyup', e => {
     </Transition>
 </template>
 
-<style scoped lang="postcss">
+<style scoped>
+@reference "tailwindcss";
 .fade-enter-from, .fade-leave-to {
     @apply opacity-0;
 }

src/components/SliderCheckbox.vue

@@ -10,7 +10,8 @@ const modelValue = defineModel({ default: false });
     </label>
 </template>
 
-<style scoped lang="postcss">
+<style scoped>
+@reference "tailwindcss";
     input:checked ~ span:last-child {
         --tw-translate-x: 1.25rem;
     }

src/components/table/SortableHeader.vue

@@ -32,7 +32,8 @@ const emit = defineEmits<Emit>();
     </component>
 </template>
 
-<style scoped lang="postcss">
+<style scoped>
+@reference "tailwindcss";
 .sort-header {
     @apply relative h-8 pe-3;
 }

src/components/table/VirtualScrollTable.vue

@@ -67,7 +67,8 @@ const itemHeightStyle = computed(() => {
     <slot v-else name="empty" />
 </template>
 
-<style scoped lang="postcss">
+<style scoped>
+@reference "tailwindcss";
 div.table-container {
     @apply bg-slate-600;
     max-height: calc(100vh - v-bind(ypx));