Use 'cn' utility with clsx/tailwind-merge

package.json

@@ -22,6 +22,7 @@
     "@trpc/react-query": "^10.0.0",
     "@trpc/server": "^10.0.0",
     "@vercel/analytics": "^0.1.6",
+    "clsx": "^2.1.1",
     "next": "^15.1.1",
     "p5i": "^0.6.0",
     "plaiceholder": "^3.0.0",
@@ -34,6 +35,7 @@
     "sass": "^1.56.2",
     "sharp": "^0.32.1",
     "superjson": "1.9.1",
+    "tailwind-merge": "^2.6.0",
     "usehooks-ts": "^3.1.0",
     "zod": "^3.24.1"
   },

src/components/AppWrapper.tsx

@@ -1,4 +1,4 @@
-import { classNames } from "@/utils/helpers";
+import { cn } from "@/utils/helpers";
 import { Disclosure } from "@headlessui/react";
 import dynamic from "next/dynamic";
 import Link from "next/link";
@@ -31,7 +31,7 @@ const AppWrapper: FunctionComponent<WrapperProps> = ({
 }: WrapperProps) => {
   return (
     <main
-      className={classNames(
+      className={cn(
         "min-h-screen text-zinc-50",
         className,
       )}

src/components/ItemCard.tsx

@@ -1,6 +1,6 @@
 import React, { useRef } from "react";
 import { useOnClickOutside, useToggle } from "usehooks-ts";
-import { classNames, isHoverable } from "@/utils/helpers";
+import { cn, isHoverable } from "@/utils/helpers";
 import ReactMarkdown from "react-markdown";
 import Balancer from "react-wrap-balancer";
 
@@ -52,7 +52,7 @@ const ItemCard = ({
     <>
       <div
         ref={itemRef}
-        className={classNames(
+        className={cn(
           "item [&:not(:first-child)]:mt-3",
           active ? "active" : null,
         )}
@@ -63,7 +63,7 @@ const ItemCard = ({
           src={banner}
           quality={bannerSettings?.quality ?? 75}
           className={(loaded) =>
-            classNames("object-cover", loaded ? null : "blur-xl")
+            cn("object-cover", loaded ? null : "blur-xl")
           }
           alt={`Banner for ${title}`}
         />
@@ -109,7 +109,7 @@ const ItemCard = ({
         aria-disabled={!active}
         ref={mobileButtonRef}
         href={active ? { pathname: location } : {}}
-        className={classNames(
+        className={cn(
           "flex w-full items-center justify-center rounded border border-zinc-900 bg-zinc-800 shadow transition-all",
           active ? "h-9 p-2 opacity-100" : "h-0 p-0 opacity-0",
         )}

src/utils/helpers.ts

@@ -3,8 +3,11 @@ import create from "@kodingdotninja/use-tailwind-breakpoint";
 import resolveConfig from "tailwindcss/resolveConfig";
 import tailwindConfig from "@/../tailwind.config.cjs";
 
-export function classNames(...classes: (string | null | undefined)[]) {
-  return classes.filter(Boolean).join(" ");
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
 }
 
 const isClient = (): boolean => {

yarn.lock

@@ -1102,7 +1102,7 @@ client-only@0.0.1:
   resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
   integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
 
-clsx@^2.0.0:
+clsx@^2.0.0, clsx@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
   integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
@@ -3862,6 +3862,11 @@ tabbable@^6.0.0:
   resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.2.0.tgz#732fb62bc0175cfcec257330be187dcfba1f3b97"
   integrity sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==
 
+tailwind-merge@^2.6.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-2.6.0.tgz#ac5fb7e227910c038d458f396b7400d93a3142d5"
+  integrity sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA==
+
 tailwindcss@^3.4.1:
   version "3.4.17"
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.17.tgz#ae8406c0f96696a631c790768ff319d46d5e5a63"