How do I use tailwind with this?

[Eerkz]

Basically the title. I've tried using inputClass and then pass to it to my tailwind classes but it's not working.

[hamitaksln]

You can add ! to class to make overwrite.

[sgoodluck]

This isn't clear that it should work -- have you tested that with Tailwind CSS?

[apexbb]

This isn't clear that it should work -- have you tested that with Tailwind CSS?

Its not ok to work with tailwind ,

my code was as below

<PhoneInput placeholder="Enter Your Phone Number" value={value} onChange={onChange} defaultCountry="HK" id="phone" // containerStyle={{ // border: "10px solid black" // }} // inputStyle={{ // background: "lightblue", // width: "30px", // height: "106px", // }} containerStyle={{ border: "20px solid black" }} inputStyle={{ background: "lightblue" }} // containerStyle={{borderRadius:20,backgroundColor: '#80c971',}} // textInputStyle={{color:"#80c971"}} // codeTextStyle={{color:"#ffffff"}} // flagButtonStyle={{color:"#ffffff"}} /> )}

[dinogomez]

Made it work by using inputProps props, you can also integrate Shadcn's cn helper function.

 <PhoneInput
  inputProps={{
    className: cn(
      "flex h-10 w-full rounded-md border border-input bg-background 
        pl-14 py-2 text-sm ring-offset-background file:border-0 
        file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground 
        focus-visible:outline-none focus-visible:ring-2
        focus-visible:ring-ring focus-visible:ring-offset-2 
        disabled:cursor-not-allowed disabled:opacity-50",
        className
    ),
  }}
/>;