feat(lib/merge-clsx): create mergeClsx lib method that uses clsx and merges tailwind classes

lib/merge-clsx.ts

+import clsx from 'clsx';
+import { extendTailwindMerge } from 'tailwind-merge';
+
+import type { ClassValue } from 'clsx';
+
+const COMMON_UNITS = ['small', 'medium', 'large'];
+
+/**
+ * We need to extend the tailwind merge to include NextUI's custom classes. *
+ * So we can use classes like `text-small` or `text-default-500` and override them.
+ */
+const twMerge = extendTailwindMerge({
+  extend: {
+    theme: {
+      opacity: ['disabled'],
+      spacing: ['divider'],
+      borderWidth: COMMON_UNITS,
+      borderRadius: COMMON_UNITS
+    },
+    classGroups: {
+      shadow: [{ shadow: COMMON_UNITS }],
+      'font-size': [{ text: ['tiny', ...COMMON_UNITS] }],
+      'bg-image': ['bg-stripe-gradient']
+    }
+  }
+});
+
+export default function mergeClsx(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package.json

@@ -16,6 +16,7 @@
     "@types/react": "^19.0.8",
     "autoprefixer": "^10.4.20",
     "classnames": "^2.5.1",
+    "clsx": "^2.1.1",
     "color2k": "^2.0.3",
     "framer-motion": "^12.4.2",
     "next": "^15.1.7",
@@ -23,6 +24,7 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "sharp": "^0.33.5",
+    "tailwind-merge": "^2.6.0",
     "tailwindcss": "^3.4.1",
     "typescript": "^5.7.3"
   },
@@ -50,5 +52,6 @@
     "storybook": "^8.5.4",
     "storybook-dark-mode": "^4.0.2",
     "webpack-bundle-analyzer": "^4.10.2"
-  }
+  },
+  "packageManager": "pnpm@10.4.1+sha512.c753b6c3ad7afa13af388fa6d808035a008e30ea9993f58c6663e2bc5ff21679aa834db094987129aa4d488b86df57f7b634981b2f827cdcacc698cc0cfb88af"
 }

pnpm-lock.yaml

@@ -23,6 +23,9 @@ importers:
       classnames:
         specifier: ^2.5.1
         version: 2.5.1
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
       color2k:
         specifier: ^2.0.3
         version: 2.0.3
@@ -44,6 +47,9 @@ importers:
       sharp:
         specifier: ^0.33.5
         version: 0.33.5
+      tailwind-merge:
+        specifier: ^2.6.0
+        version: 2.6.0
       tailwindcss:
         specifier: ^3.4.1
         version: 3.4.17