tailwind css custom class passed as props is not overriding the already applied class

Question

I am using tailwind classes and below is my code. some people suggested to use classNames so used that as well, so similar code in both the newer and older format

const backgroundColor = disabled ? "bg-secondary-500" : "bg-green-700";

className={classNames(
        "w-20 my-2 p-2 text-white rounded capitalize hover:ease-in hover:scale-110 hover:duration-200",
        customClass,
        backgroundColor,
        { "pointer-events-none": true }
      )}

 className={`w-20 my-2 p-2 text-white bg-green-700 rounded capitalize 
             hover:ease-in hover:scale-110 hover:duration-200 
             ${disabled ? "pointer-events-none bg-secondary-500" : ""} 
             ${customClass}`}

so in my customClass I have "w-60". but "w-20" is only getting applied. even it is happening for "bg-green-700" and I wanted it to be "bg-secondary-500" for disabled: true

so my disabled is coming as true and pointer-event-none is getting applied but secondary class is overridden by green class

I checked the DOM and both the bg class and both the width classes are available in the below order

<button class="w-20 my-2 p-2 text-white bg-green-700 rounded capitalize 
    hover:ease-in hover:scale-110 hover:duration-200 w-60 
    bg-secondary-500 pointer-events-none">View Docs
</button>

so if anyone has any idea this is happening, please help

score 1 · Accepted Answer · answered Jul 06 '22 at 16:48

1

For merging Tailwind classes use https://github.com/dcastil/tailwind-merge instead of classNames

import { twMerge } from 'tailwind-merge'

// ...

className={twMerge(
  "w-20 my-2 p-2 text-white bg-green-700 rounded capitalize hover:ease-in hover:scale-110 hover:duration-200",
  disabled && "pointer-events-none bg-secondary-500",
  customClass
)}

answered Jul 06 '22 at 16:48

dr497

474
2
3

sure let me try – Bishal Jain Jul 07 '22 at 16:28
this is exactly was needed, so basically it is overriding the class coming later with the previously applied one and so w-20 is getting replaced with w-60 and so does background colors – Bishal Jain Jul 07 '22 at 16:34

score 0 · Answer 2 · answered Jul 07 '22 at 05:26

0

Here if I understood correctly , you want bg-secondary-500 when button is disabled. This can be done by this

className={`w-20 my-2 p-2 text-white rounded capitalize
             hover:ease-in hover:scale-110 hover:duration-200
             ${disabled ? "pointer-events-none bg-secondary-500" : "bg-green-500 pointer-events-auto"}
             `}

However you need to add any condtion if you want to change from w-20 to w-60. Else simply use w-60.

answered Jul 07 '22 at 05:26

MagnusEffect

3,363
1
16
41

for background color its fine and whatever you have suggested will work but this is my button component which has w-20 as the default class and one of the button has larger text so while importing this I am just passing w-60 as the customClass – Bishal Jain Jul 07 '22 at 16:27
Let replace it with `w-full` ,then no need to pass anything – MagnusEffect Jul 07 '22 at 16:43
this is what is my understanding for width, please correct me whereever I am wrong. w-full is like width:100%, so that will again depend upon where the button is placed, as if it is bottom of the page and considering that as a block level element it is take the whole page width as 100% but if it is inside some other div which has a defined width it will take that div width as its 100% width – Bishal Jain Jul 07 '22 at 16:50
the above answer with twMerge it is working for me – Bishal Jain Jul 07 '22 at 16:51
1

So replace it with `w-auto` once. Then it will take the width needed by its content – MagnusEffect Jul 07 '22 at 16:58
w-auto worked for width but again I need to have some condition for bg-color as for that we dont have anything generic like w-auto, but this was a good solution, so when ever it is just a matter of sizes I can use w-auto or some similar otherwise "tw-merge" thanks – Bishal Jain Jul 09 '22 at 14:19

tailwind css custom class passed as props is not overriding the already applied class

2 Answers2