How to add conflicting classes bypass?

[tanshunyuan]

I've the following tailwind.config.ts setup

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    colors: {
      white: {
        50: "#FFFFFF",
      },
      secondary: {
        green: {
          500: "#10D298",
        },
      }
    },
    fontFamily: {
      body: ["Open Sans"],
    },
    fontSize: {
      "button-1": [
        "0.9375rem", //15px
        {
          lineHeight: "1.4375rem", //23px
          letterSpacing: "0.5px",
          fontWeight: 600,
        },
      ],
      "button-2": [
        "0.8125rem", //13px
        {
          lineHeight: "1.25rem", //20px
          letterSpacing: "0.5px",
          fontWeight: 600,
        },
      ],
    },
  },
  plugins: [],
};

Helper class configuring tailwind-merge

import { clsx, type ClassValue } from "clsx";
import { extendTailwindMerge } from "tailwind-merge";

const cn = (...inputs: ClassValue[]) => {
  const modfiedInput = clsx(inputs);
  const customTwMerge = extendTailwindMerge({});

  const mergedClasses = customTwMerge(modfiedInput);
  return mergedClasses;
};

export { cn };

I've the following button class

import * as React from "react";
import { Slot } from "@radix-ui/react-slot";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "../../utils";

/** @see https://vincentdusautoir.com/posts/button-variants-tailwindcss */

const solidVariants = cva("", {
  variants: {
    variant: {
      primary:
        "bg-secondary-green-500 text-white-50", <-- CONFLICT
    },
  },
});

const outlineVariants = cva("", {
  variants: {
    variant: {
      primary: "border border-secondary-green-500 text-secondary-green-500", <-- CONFLICT
      secondary: "border border-gray-300 text-gray-800",
    },
  },
});

const buttonVariants = cva(
  "inline-flex items-center justify-center rounded-lg disabled:cursor-not-allowed disabled:opacity-75",
  {
    variants: {
      variant: {
        "primary-solid": solidVariants({ variant: "primary" }),
        "primary-outline": outlineVariants({ variant: "primary" }),
      },
      size: {
        none: "",
        sm: "px-3 py-2 text-button-2", <-- CONFLICT
        base: "px-2 py-3 text-button-1", <-- CONFLICT
      },
    },
    defaultVariants: {
      variant: "primary-solid",
      size: "base",
    },
  }
);

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean;
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  (
    { className, variant, size, asChild = false, type = "button", ...props },
    ref
  ) => {
    const Comp = asChild ? Slot : "button";
    return (
      <Comp
        className={cn(buttonVariants({ variant, size, className }))}
        ref={ref}
        type={type}
        {...props}
      />
    );
  }
);
Button.displayName = "Button";

export { Button, buttonVariants };

On my button,text-button-1 overrides text-white-50. Causing my button to be bold and not white. Ideally, I want both classes to be merged so it will result in

<Button className='text-button-1 text-white-50'></Button>

I've looked at https://github.com/dcastil/tailwind-merge/blob/v1.10.0/docs/configuration.md#extending-the-tailwind-merge-config, but i'm still not sure how to configure tailwind-merge to detect the conflict and use it together.

Side note, I think it'll be an improvement if the examples are using actual classes from tailwindcss instead of foo bar which might be difficult to follow along

[dcastil]

Hey @tanshunyuan! 👋

There are several things in here:

Where to place call to extendTailwindMerge

Regarding your cn helper function, I'd strongly advice to put the extendTailwindMerge call outside of the cn function. In that call a lot of setup is happening and if you call the function on every cn call, you're doing that setup over and over again which might degrade the performance of your app unnecessarily. This code should fix this:

import { clsx, type ClassValue } from https://github.com/lukeed/clsx;
import { extendTailwindMerge } from https://github.com/dcastil/tailwind-merge;

const customTwMerge = extendTailwindMerge({});

const cn = (...inputs: ClassValue[]) => {
  const modfiedInput = clsx(inputs);
  const mergedClasses = customTwMerge(modfiedInput);
  return mergedClasses;
};

export { cn };

I added an issue to add this info to the docs: #258

How to configure tailwind-merge

tailwind-merge is set up so that classes that start with text- it doesn't recognize are treated as colors. You can fix this by configuring tailwind-merge so that it knows that text-button-1 and text-button-2 classes are font-size classes.

This code should do it:

const customTwMerge = extendTailwindMerge({
    classGroups: {
        'font-size': [{ text: ['button-1', 'button-2'] }],
    }
});

There is a guide on how to do it with a specific example here: https://github.com/dcastil/tailwind-merge/blob/v1.13.2/docs/recipes.md#adding-custom-scale-from-tailwind-config-to-tailwind-merge-config

Examples with foo bar are confusing

Good point, I added an issue to improve those in #260. Thanks for your feedback!

[tanshunyuan]

Ahh i got it and it works now! So in short it will be

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    colors: {
      white: {
        50: "#FFFFFF",
      },
      secondary: {
        green: {
          500: "#10D298",
        },
      }
    },
    fontSize: {
      "button-1": [
        "0.9375rem", //15px
        {
          lineHeight: "1.4375rem", //23px
          letterSpacing: "0.5px",
          fontWeight: 600,
        },
      ],
      "button-2": [
        "0.8125rem", //13px
        {
          lineHeight: "1.25rem", //20px
          letterSpacing: "0.5px",
          fontWeight: 600,
        },
      ],
    },
  },
  plugins: [],
};

Using extendTailwindMerge

const customTwMerge = extendTailwindMerge({
    classGroups: {
        'font-size': [{ text: ['button-1', 'button-2'] }],
    }
});

When applied it will not conflict

export const ButtonTextOne = (props: TextProps) => {
  const { className, children } = props;
  return (
    <p
      className={cn(
        "text-button-1 text-secondary-green-900 font-semibold",
        className
      )}
    >
      {children}
    </p>
  );
};