diff --git a/packages/frontend/src/utils/classnames.ts b/packages/frontend/src/utils/classnames.ts
new file mode 100644
index 00000000..7c5139f9
--- /dev/null
+++ b/packages/frontend/src/utils/classnames.ts
@@ -0,0 +1,13 @@
+import { clsx } from 'clsx';
+import type { ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+/**
+ * Returns a merged class name string by merging and processing multiple class names and Tailwind CSS styles.
+ *
+ * @param {...string[]} args - One or more class names and/or Tailwind CSS styles to be merged.
+ * @returns {string} - The merged class name string.
+ */
+export function cn(...args: ClassValue[]): string {
+  return twMerge(clsx(args));
+}