diff --git a/src/components/Accordion/composables/useAccordionContentClasses.ts b/src/components/Accordion/composables/useAccordionContentClasses.ts
index cc38667..d4669d6 100644
--- a/src/components/Accordion/composables/useAccordionContentClasses.ts
+++ b/src/components/Accordion/composables/useAccordionContentClasses.ts
@@ -1,6 +1,6 @@
 import { computed, type Ref } from 'vue'
 import { useAccordionState } from '@/components/Accordion/composables/useAccordionState'
-import classNames from 'classnames'
+import { twMerge } from 'tailwind-merge'
 
 const baseContentClasses = 'p-5 border border-gray-200 dark:border-gray-700 dark:bg-gray-900'
 export function useAccordionContentClasses(contentRef: Ref) {
@@ -12,12 +12,13 @@ export function useAccordionContentClasses(contentRef: Ref) {
   const panelsCount = computed(() => Object.keys(accordionsStates[accordionId.value].panels[panelId.value]).length)
 
   const contentClasses = computed(() => {
-    return classNames(baseContentClasses, {
-      hidden: !panelState.value.isVisible,
-      'border-b-0': panelState.value.order !== panelsCount.value - 1 || accordionState.value.flush,
-      'border-t-0': panelState.value.order === panelsCount.value - 1,
-      'border-x-0': accordionState.value.flush,
-    })
+    return twMerge(
+      baseContentClasses,
+      !panelState.value.isVisible && 'hidden',
+      (panelState.value.order !== panelsCount.value - 1 || accordionState.value.flush) && 'border-b-0',
+      panelState.value.order === panelsCount.value - 1 && 'border-t-0',
+      accordionState.value.flush && 'border-x-0',
+    )
   })
   return {
     contentClasses,
diff --git a/src/components/Accordion/composables/useAccordionHeaderClasses.ts b/src/components/Accordion/composables/useAccordionHeaderClasses.ts
index afa4922..11b44ff 100644
--- a/src/components/Accordion/composables/useAccordionHeaderClasses.ts
+++ b/src/components/Accordion/composables/useAccordionHeaderClasses.ts
@@ -1,6 +1,6 @@
 import { computed, type Ref } from 'vue'
 import { useAccordionState } from '@/components/Accordion/composables/useAccordionState'
-import classNames from 'classnames'
+import { twMerge } from 'tailwind-merge'
 
 const baseHeaderClasses =
   'flex items-center p-5 w-full font-medium text-left text-gray-500 border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800'
@@ -16,16 +16,17 @@ export function useAccordionHeaderClasses(headerRef: Ref) {
   const isBottomBorderVisibleForFlush = computed(() => isPanelLast.value || (accordionState.value.flush && panelState.value.order === panelsCount.value - 1 && !panelState.value.isVisible))
 
   const headerClasses = computed(() => {
-    return classNames(baseHeaderClasses, {
-      'bg-gray-100 dark:bg-gray-800': panelState.value.isVisible,
-      'rounded-t-xl': panelState.value.order === 0 && !accordionState.value.flush,
-      'border-t-0': panelState.value.order === 0 && accordionState.value.flush,
-      'border-b-0': isBottomBorderVisibleForFlush.value,
-      'border-x-0': accordionState.value.flush,
-    })
+    return twMerge(
+      baseHeaderClasses,
+      panelState.value.isVisible && 'bg-gray-100 dark:bg-gray-800',
+      panelState.value.order === 0 && !accordionState.value.flush && 'rounded-t-xl',
+      panelState.value.order === 0 && accordionState.value.flush && 'border-t-0',
+      isBottomBorderVisibleForFlush.value && 'border-b-0',
+      accordionState.value.flush && 'border-x-0',
+    )
   })
   const arrowClasses = computed(() => {
-    return classNames(baseArrowClasses, { 'rotate-180': panelState.value.isVisible })
+    return twMerge(baseArrowClasses, panelState.value.isVisible && 'rotate-180')
   })
   return {
     headerClasses,