Help needed with light/dark mode setup

[princemuel]

Hi. Please I need help configuring tailwind-merge to accept both light and dark mode classes.

Currently, when I pass in this class, text-blue-500 dark:text-white, it removes the light mode class.

Here's my current setup

import { cx } from 'cva';
import { twMerge } from 'tailwind-merge';


export const cn = (...args: ClassValue[]) => twMerge(cx(args))

And I'm using it with class-variance-authority like so

import { cn } from '@/lib';
import type { VariantProps } from 'cva';
import { cva } from 'cva';

const textVariants = cva('', {
  defaultVariants: {
    intent: 'primary',
    size: 's',
  },
  variants: {
    intent: {
      primary: 'text-brand-900 dark:text-white',
      secondary: 'text-brand-400 dark:text-brand-400',
      outline: '',
    },
    size: {
      s: '',
      xs: 'text-300 leading-200',
      sm: 'text-400 leading-400',
      md: 'text-500 leading-300',
      lg: 'text-600 leading-400',
      xl: 'text-700 leading-500',
    },

    weight: {
      bold: 'font-bold',
      medium: 'font-medium',
      regular: 'font-normal',
    },
  },
  compoundVariants: [
    {
      intent: 'secondary',
      size: 'xs',
      weight: 'bold',
      class: 'tracking-100',
    },
  ],
});

interface TextVariants extends VariantProps<typeof textVariants> {}
const text = (variants: TextVariants, className = '') =>
  cn(textVariants(variants), className);

type Props<E extends React.ElementType = 'p'> = ElementProps<E> & TextVariants;

const Text = <E extends React.ElementType = 'p'>({
  as,
  intent,
  weight,
  size,
  className,
  children,
  ...rest
}: Props<E>) => {
  const Rendered = as || 'p';

  return (
    <Rendered className={text({ intent, weight, size }, className)} {...rest}>
      {children}
    </Rendered>
  );
};

export { Text };

[dcastil]

Hey @princemuel! 👋

Could you create a reproducible example with https://codesandbox.io/s/tailwind-merge-playground-cssr35?file=/src/index.ts and post the code here?

Just tried it out with this code and it seems to work fine.

const mergeData: MergeData[] = [
    {
        args: ['text-blue-500 dark:text-white'],
    },
]

Output:

Merged: text-blue-500 dark:text-white

[princemuel]

Sorry, I just realized I didn't use my exact class.

I added a brand color in the extends section of my tailwind config. It seems tailwind-merge respects the default colors, but ignores the custom ones.
The reproduced version is here

The theme config

    extend: {
      colors: {
        brand: {
          100: '#f4f7fd',
          200: '#e4ebfa',  
          300: '#a8a4ff',
          400: '#828fa3',
          500: '#635fc7',
          600: '#3e3f4e', 
          700: '#2b2c37',
          800: '#20212c',
          900: '#000112',
        },
        accent: {
          100: '#ff9898',
          200: '#ea5555',
          300: '#49C4E5',
          400: '#8471F2',
          500: '#67E2AE',
        },
      },
....
}

[dcastil]

Thanks for the repro! I see the class text-700 which tailwind-merge interprets as a color and therefore removes the preceding class text-brand-900. I don't know what type of class that is, but if it isn't a color, you'll need to configure tailwind-merge to know what type of class it is. Here is a guide on how to do it: https://github.com/dcastil/tailwind-merge/blob/v1.13.2/docs/recipes.md#adding-custom-scale-from-tailwind-config-to-tailwind-merge-config

E.g. if it's a font-size class, you need this code:

const twMerge = extendTailwindMerge({
    classGroups: {
        'font-size': [{ text: ['100', '200', …] }]
    }
})

[princemuel]

Yeah, I was testing it and just noticed that.

[princemuel]

The text-100 to text-700 classes are font sizes.

[dcastil]

Ah, just added the example to my previous comment. 😄

[princemuel]

Hah, don't mind me, I was distracted and didn't see your message 🤭

Thanks a lot for the timely response. You're awesome. I've spent almost 4 hours searching for a solution and I actually read the example in the docs but didn't understand it clearly.

Funnily enough, I understand it now 😅