Add tailwind-merge library and combine it with existing classnames library by making a custom util function to have more control and optimizations of tailwind classes in various scenarios.
Example Scenario:
lets take the Button UI component for instance, when we pass more classes (ex- 'px-2') via props, css still gives specificity to 'px-4' of the Button component itself, to solve this we sometimes use ! (important selector) but that's not a good common practice to use it every time. so tailwind-merge will help here.. it will only output the class added last in the order, also remove redundant classes and possibly try to merge classes as well.
Add tailwind-merge library and combine it with existing
classnameslibrary by making a custom util function to have more control and optimizations of tailwind classes in various scenarios.Example Scenario:
lets take the Button UI component for instance, when we pass more classes (ex- 'px-2') via props, css still gives specificity to 'px-4' of the Button component itself, to solve this we sometimes use ! (important selector) but that's not a good common practice to use it every time. so tailwind-merge will help here.. it will only output the class added last in the order, also remove redundant classes and possibly try to merge classes as well.
I can do this, would you mind assigning it to me?