I have to use ! important to overwrite

[shinokada]

I have the following Svelte button component. (You can see whole code here.)

  // more lines
  const colorClasses = {
    alternative:
      'text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-400 hover:text-primary-700 focus:text-primary-700 dark:focus:text-white dark:hover:text-white',
    blue: 'text-white bg-blue-700 hover:bg-blue-800 dark:bg-blue-600 dark:hover:bg-blue-700',
  primary: 'text-white bg-primary-700 hover:bg-primary-800 dark:bg-primary-600 dark:hover:bg-primary-700',
// more lines
    none: ''
  };
// more lines
let buttonClass: string;
  $: buttonClass = twMerge(
        'text-center font-medium',
        group ? 'focus:ring-2' : 'focus:ring-4',
        group && 'focus:z-10',
        group || 'focus:outline-none',
        'inline-flex items-center justify-center ' + sizeClasses[size],
        outline ? outlineClasses[color] : colorClasses[color],
        color === 'alternative' &&
          (group
            ? 'dark:bg-gray-700 dark:text-white dark:border-gray-700 dark:hover:border-gray-600 dark:hover:bg-gray-600'
            : 'dark:bg-transparent dark:border-gray-600 dark:hover:border-gray-700'),
        outline &&
          color === 'dark' &&
          (group ? 'dark:text-white dark:border-white' : 'dark:text-gray-400 dark:border-gray-700'),
        coloredFocusClasses[color],
        hasBorder() && group && 'border-l-0 first:border-l',
        group
      // more lines
        $$props.class
      );

When I use this component to overwrite color, I need to use ! symbol and merging is not working.

<Button class="!bg-blue-500">
	 Blue Button
</Button>

Output:

<button type="button" class="text-center font-medium focus:ring-4 focus:outline-none inline-flex items-center justify-center px-5 py-2.5 text-sm text-white bg-primary-700 hover:bg-primary-800 dark:bg-primary-600 dark:hover:bg-primary-700 focus:ring-primary-300 dark:focus:ring-primary-800 rounded-lg !bg-blue-500">Blue Button</button>

I'd like to know what could be the limitations or in which conditions twMerge don't work.

[dcastil]

Hey @shinokada! 👋

Just tried to reproduce your use case in https://codesandbox.io/s/tailwind-merge-playground-cssr35?file=/src/index.ts

with this code which should match yours:

const mergeData: MergeData[] = [
    {
        args: [
            'text-center font-medium',
            'focus:ring-4',
            'focus:outline-none',
            'inline-flex items-center justify-center',
            'px-5 py-2.5 text-sm',
            'text-white bg-primary-700 hover:bg-primary-800 dark:bg-primary-600 dark:hover:bg-primary-700',
            'focus:ring-primary-300 dark:focus:ring-primary-800',
            'rounded-lg',
            'bg-blue-500'
        ],
    },
]

The result is the following where the bg-primary-700 class seems to be removed correctly.

text-center font-medium focus:ring-4 focus:outline-none inline-flex items-center justify-center px-5 py-2.5 text-sm text-white hover:bg-primary-800 dark:bg-primary-600 dark:hover:bg-primary-700 focus:ring-primary-300 dark:focus:ring-primary-800 rounded-lg bg-blue-500

Are you sure that the issue isn't somewhere else? If so, could you create a reproducible example in https://codesandbox.io/s/tailwind-merge-playground-cssr35?file=/src/index.ts and paste the code here?

[shinokada]

Thank you for replying to the issue.
I tested it at Stackblitz and it seems working.

I appreciate your work and time.

I close the issue for now.
Thank you.