Bug: Cannot override preset if using Tailwind important: true

[martinszeltins]

Describe the bug

As @mertsincan said in this PrimeVue Tailwind issue, I am opening an issue here.

It is not currently possible to override a preset locally if project is using important: true in tailwind.config. It seems it would be better to use the tailwind-merge library. I am referring to this: https://tailwind.primevue.org/guides/overriding-presets/#important

In some projects it is necessary to use important: true configuration.

For example, here the !bg-blue-500 class won't work because all my Tailwind classes in my project are important because of important: true in my tailwind config.

<InputText
  placeholder="Password"
  :pt="{ root: '!bg-blue-500' }"
  :pt-options="{ mergeSections: true, mergeProps: true }"
/>

tailwind.config.js
export default {
    content: [
        //
    ],
    important: true,
};

As was suggested by @mertsincan we could add a method to use custom merging libraries.

:pt-options="{ mergeSections: true, mergeProps: <function | boolean> }"

mergeProps: (global, self) => {
     //return // you can use tailwind-merge method with global.class and self.class
}

Reproducer

https://stackblitz.com/edit/github-b8ul9o?file=src%2FApp.vue

PrimeVue version

3.46.0

Vue version

3.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

[mertsincan]

Thanks a lot for your report! I'll work on it in the 3.48 milestone.

[mertsincan]

Hi @martinszeltins,

The good news is that the mergeProps option has been improved in this version. You can do this kind of operation by writing your custom merge method. Please see;
#4707 (comment)

Best Regards,

[martinszeltins]

Hi @martinszeltins,

The good news is that the mergeProps option has been improved in this version. You can do this kind of operation by writing your custom merge method. Please see; #4707 (comment)

Best Regards,

@mertsincan awesome! It feels like the tailwind merge option should be the default or at least made easier where you don't have to write custom code to enable it :)

[mertsincan]

Thanks for the feedback, but we don't want to be dependent on such 3rd party APIs. That's why we wanted users to write a global merge method and use the API or custom implementation they want. I think this is a more flexible approach. Also, this situation should not be evaluated only in terms of 'class'. For example, you have a custom event or HTML attribute that is both global and local. You can apply the special combination method accordingly, whichever you want to prioritize.

[martinszeltins]

Thanks for the feedback, but we don't want to be dependent on such 3rd party APIs. That's why we wanted users to write a global merge method and use the API or custom implementation they want. I think this is a more flexible approach. Also, this situation should not be evaluated only in terms of 'class'. For example, you have a custom event or HTML attribute that is both global and local. You can apply the special combination method accordingly, whichever you want to prioritize.

That makes sense. I'm just thinking that tailwind-merge is going to be such a common and often used strategy which means that everyone would end up writing the same code as everyone else and "reinventing the wheel" all over again. Perhaps there could be a third party npm library that anyone can pull in so they don't have to reinvent the wheel.