PassThough new merging strategy with tailwind-merge to smartly merge classes

[gurvancampion]

Describe the feature you would like to see added

Use tailwind-merge to smartly merge tailwind classes.

Is your feature request related to a problem?

Currently, if we want to customize the default Tailwind preset with a Custom Preset, we have two options:

1. Default merge with usePassThought, the classes will be concatenated together
2. Override the default classes with the option mergeProps

The first option will result in duplicated classes and will require us to use !important utility by adding a ! character to the beginning of a class if we want to override one class.
The second option will result in rewriting all of the classes.

Describe the solution you'd like

Use a third merging strategy "smarter" with tailwind-merge that could be the default.
We could use the awesome library defu combined with tailwind-merge to smartly merge tailwind classes.
It would look pretty similar to how it's handled in NuxtUI, here is the how they currently handle it: https://github.com/nuxt/ui/blob/dev/src/runtime/utils/index.ts

Here is an example explained in the NuxtUI documentation that uses the equivalent of pt with ui: https://ui.nuxt.com/getting-started/theming#ui-prop

Describe alternatives you have considered

No response

Additional context

No response

[melloware]

This was implemented in PrimeReact using this PR: primefaces/primereact#5755

It allows for using TailWind Merge properly

[mertsincan]

Hi,

I modified the mergeProps options to customize the returned pt props using globalPTProps, selfPTProps etc.

:ptOptions="{
     mergeProps: true | false | Function
}"

Exp;

// On Component
<Dropdown 
    :pt="{
        root: { class: 'w-full md:w-14rem' },
        ...
    }"
    :ptOptions="{
        mergeProps: customMergeProps
    }"
/>

// On Global
app.use(PrimeVue, {pt: ..., ptOptions:{ mergeProps: customMergeProps }});

// On usePassThrough
const CustomPreset = usePassThrough(
    BasePreset,
    {
        dropdown: {
            root: { class: 'w-full md:w-14rem' },
            ...
        }
    },
    {
        mergeProps: customMergeProps
    }
);

...
const customMergeProps = (globalPTProps = {}, selfPTProps = {}, datasets) => {
    const { class: globalClass, ...globalRest } = globalPTProps;
    const { class: selfClass, ...selfRest } = selfPTProps;

     /*
      * - mergeProps from Vue package
      * - twMerge from tailwind-merge package
      */
    return Vue.mergeProps({ class: twMerge(globalClass, selfClass) }, globalRest, selfRest, datasets);
}

Best Regards,

[damms005]

@mertsincan Sorry for poking you but this new custom merge is not working for me:

<Column
  :pt="{
	  headerCell: {
		  class: 'z-10 min-w-full bg-gray-50 px-3 py-2 text-gray-500 dark:bg-gray-800 dark:text-gray-400',
	  },
  }"
  :pt-options="{
	  mergeProps: customMergeProps,
  }"
  v-for="..."
>
...
</Column>

function customMergeProps(globalPTProps: Record<string, any> = {}, selfPTProps: Record<string, any> = {}, datasets: any) {
	const { class: globalClass, ...globalRest } = globalPTProps
	const { class: selfClass, ...selfRest } = selfPTProps

	debugger
	console.log({ globalClass, selfClass })
	return mergeProps({ class: twMerge(globalClass, selfClass) }, globalRest, selfRest, datasets)
}

I added the debugger and console for debugging. Neither is hit, meaning the function wasn't called.

Any hints?

[mertsincan]

Hi @damms005, thanks a lot for your report! Could you please create a new issue ticket with a sample stackblitz link for this? Thank you!

[EdvinasBa]

@damms005 I know this is closed, but I wanted to help, idk why, but if you merge props first, then classes it works:

const customMergeProps = (
  globalPTProps: Record<string, any> = {},
  selfPTProps: Record<string, any> = {},
  datasets: any,
) => {
  const merged = mergeProps(globalPTProps, selfPTProps, datasets);
  merged.class = twMerge(merged.class as ClassNameValue);
  return merged;
};

const primeVueSettings: PrimeVueConfiguration = {
  ripple: false,
  unstyled: true,
  pt,
  ptOptions: {
    mergeProps: customMergeProps,
  },
};

[mertsincan]

Hi @EdvinasBa, thanks a lot for your update! I gave an example based on the link below.
https://www.npmjs.com/package/tailwind-merge#tailwind-merge
This part is left entirely to the user and they are allowed to customize it as they wish.

[sergeydus]

@mertsincan https://stackblitz.com/edit/ygjjym?file=src%2FApp.vue

customMergeProps appears to do nothing in the reproduction, log not happening

edit: tested in 4.0.5, now it seems to work!

[sergeydus]

@melloware it seems ptOptions overrides the defaults of its descendants: primefaces/primevue-tailwind#320