tailwindcss-mangle not working with tailwind-merge

[mrberenben]

i have an utility that overrides duplicate tailwind classes like "px-5 px-6" converts to "px-6". but when i obfuscate classes, merge doesn't work and implements to dom tw-abc tw-abd means px-5 px-6.

here is my merging utility source code:

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

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

[sonofmagic]

Yes, this is the case, because tailwindcss-mangle replaces class names, mainly at compile time, while tailwind-merge is a runtime tool. When compiling, the tailwindcss class name has been replaced, and naturally it will not take effect when doing tailwind-merge

Let me think about how to solve this situation.

[mrberenben]

hey ser! did you find a solution?

[sonofmagic]

Hello, in version 2.2.1, I experimentally set up a preserveFunction option to preserve all string literals in the middle of this function. For example, in your case, you can configure it like:

// tailwindcss-mangle.config.ts
import { defineConfig } from 'tailwindcss-patch'

export default defineConfig({
  mangle: {
    preserveFunction: ['twMerge', 'cn']
  }
})

Then:

// all be preserved
const aaa = twMerge('px-2 py-1 bg-red-100 hover:bg-red-800', 'p-3 bg-[#B91C1C]')
// all be preserved
const bbb = cn(
  {
    'p-3': true
  },
  'p-1',
  ['p-2', true && 'p-4']
)

// but in this case, only `'text-[#654321]'` will be preserved
const a = 'm-1'
const b = 'bg-[#123456]'
const ccc = cn(a,b,'text-[#654321]')

Hope this will be helpful to you :)

[mrberenben]

didn't work