Add support for object like syntax

[mkbctrl]

Hey, currently I end up merging tailwind-merge and clsx or classnames. Love tailwind-merge, however inline logic can produce a lot of noise, and I find object like syntax more readable:

const buttonClass = tm({
  'bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded': isEnabled,
  'opacity-50 cursor-not-allowed': isDisabled,
});

What do you think about that? Pretty simple addition.

import classNames from "classnames"
import { twMerge } from 'tailwind-merge'

export const cnm = (...args: classNames.ArgumentArray) => {
  return twMerge(classNames(...args))
}

import { cnm } from './class-name-merge'

describe('cnm', () => {
  // Tests for text color classes
  it('should merge text color classes and prioritize the last one', () => {
    const result = cnm('text-green-500', 'text-red-500')
    expect(result).toBe('text-red-500')
  })

  // Tests for margin classes
  it('should merge margin classes and prioritize the last one', () => {
    const result = cnm('m-4', 'm-8')
    expect(result).toBe('m-8')
  })

  // Tests for padding classes
  it('should merge padding classes and prioritize the last one', () => {
    const result = cnm('p-2', 'p-4')
    expect(result).toBe('p-4')
  })

  // Tests for conditional color classes
  it('should handle conditional color classes', () => {
    const result = cnm({ 'text-green-500': false, 'text-red-500': true })
    expect(result).toBe('text-red-500')
  })

  // Tests for mixed types with color, margin, and padding
  it('should handle mixed types of arguments with color, margin, and padding', () => {
    const result = cnm('text-green-500', ['m-4', { 'p-2': true }], 'text-red-500')
    expect(result).toBe('m-4 p-2 text-red-500')
  })
})

[dcastil]

Hey @mkbctrl! 👋

Thanks for your feedback! I wrote in #137 (comment) about the reason why tailwind-merge doesn't support the object syntax. But I'm curious why you find the object syntax more readable than the logical and syntax. If you disagree with my comment linked above, I'd love to know why!

---

Duplicate of #137

[mkbctrl]

In general I would say it's a matter of preference, and the api of the function should accommodate developers preferences as this contributes directly to high DX. It's not right or wrong kind of situation in my opinion. Some people prefer red color over the green one, and as far as I know developers, they always have opinions why X is better than Y. So as long as language syntax supports different styles it should be reflected in the interfaces we use on daily basis. Freedom FTW 🙌