Tailwind Merge (#6596)

* Tailwind Merge

* Fix merge classNames

apps/web/components/Embed.tsx

@@ -1163,7 +1163,7 @@ export const EmbedButton = <T extends React.ElementType>({
   ...props
 }: EmbedButtonProps<T> & React.ComponentPropsWithoutRef<T>) => {
   const router = useRouter();
-  className = classNames(className, "hidden lg:inline-flex");
+  className = classNames("hidden lg:inline-flex", className);
   const openEmbedModal = () => {
     goto(router, {
       dialog: "embed",

packages/lib/classNames.ts

@@ -1,3 +1,5 @@
+import { twMerge } from "tailwind-merge";
+
 export default function classNames(...classes: unknown[]) {
-  return classes.filter(Boolean).join(" ");
+  return twMerge(classes.filter(Boolean).join(" "));
 }

packages/lib/package.json

@@ -22,6 +22,7 @@
     "next-i18next": "^11.3.0",
     "react-hot-toast": "^2.3.0",
     "rrule": "^2.7.1",
+    "tailwind-merge": "^1.8.1",
     "tsdav": "2.0.3",
     "tslog": "^3.2.1",
     "uuid": "^8.3.2"

packages/ui/components/avatar/AvatarGroup.tsx

@@ -20,7 +20,7 @@ export const AvatarGroup = function AvatarGroup(props: AvatarGroupProps) {
   const truncateAfter = props.truncateAfter || 4;
 
   return (
-    <ul className={classNames(props.className, "flex items-center")}>
+    <ul className={classNames("flex items-center", props.className)}>
       {avatars.map((item, enumerator) => {
         if (item.image != null) {
           if (LENGTH > truncateAfter && enumerator === truncateAfter - 1) {

packages/ui/components/divider/Divider.tsx

@@ -1,12 +1,12 @@
 import { classNames } from "@calcom/lib";
 
 export function Divider({ className, ...props }: JSX.IntrinsicElements["hr"]) {
-  className = classNames(className, "gray-200");
+  className = classNames("gray-200", className);
   return <hr className={className} {...props} />;
 }
 
 export function VerticalDivider({ className, ...props }: JSX.IntrinsicElements["svg"]) {
-  className = classNames(className, "mx-3");
+  className = classNames("mx-3", className);
   return (
     <svg
       className={className}

packages/ui/components/form/dropdown/Dropdown.tsx

@@ -16,7 +16,7 @@ export const DropdownMenuTrigger = forwardRef<HTMLButtonElement, DropdownMenuTri
       {...props}
       className={
         props.asChild
-          ? classNames(className, "rounded-md ring-0")
+          ? classNames("rounded-md ring-0", className)
           : `inline-flex items-center rounded-md bg-transparent px-3 py-2 text-sm font-medium text-gray-700 ring-0 hover:bg-gray-50 focus:bg-gray-100 group-hover:text-black ${className}`
       }
       ref={forwardedRef}

packages/ui/form/fields.tsx

@@ -75,7 +75,7 @@ const InputField = forwardRef<HTMLInputElement, InputFieldProps>(function InputF
           <Input
             id={id}
             placeholder={placeholder}
-            className={classNames(className, "mt-0", props.addOnLeading && "rounded-l-none")}
+            className={classNames("mt-0", props.addOnLeading && "rounded-l-none", className)}
             {...passThrough}
             ref={ref}
           />