user given className doesn't override default className

[armanal]

I was trying to give the Input element a min width of zero (min-w-0) where I found out that the default class (min-w-[200px]) was not being removed. Since the browser keeps an element's classes in a set-like data structure, the order of appearance might not be kept. So this causes unpredictable behaviour.

Then I realized in some of the components default classes were merged with user given ones using twMerge where dedupes and overrides classes effecting the same CSS. I would like to do the same thing for all other components to

• keep the code more readable by following the same pattern
• have a consistent logic
• have a predictable behavior

I'd like to work on a pull request that changes :

const containerClasses = classnames(
      objectsToString(base.container),
      objectsToString(inputSize.container),
      containerProps?.className,
    );

to :

const containerClasses = twMerge(
      classnames(objectsToString(base.container), objectsToString(inputSize.container)),
      containerProps?.className,
    );

in the @material-tailwind/react package.

[JuanAntonioV]

have u tried this !min-w-0 ? this make the class is !important so can override the default material tailwind className.

[armanal]

yes. I have tried using !min-w-0 and somehow the browser (chrome for example) keeps using default classes. Here I have tried same thing with TextArea element. both classes appear to be applied when inspecting in the browser but the default one (min-w-[200px]) is taking effect:

[ViniciusTxr]

@JuanAntonioV use !min-w-0 work for me in Input component!! Tks :D

min-w-[200px] continues to appear in the tags, but it has been replaced in the component's styling as you can see below:

Note: it only works with !, without important it doesn't work

[TechHoruser]

Hello,

well, when I do that, it doesn't include the min-width in the div; instead, it applies it to the input and causes the error.

And the result: