Can I use tailwind to style the input ?

[GoshaOlegovich]

Can I use tailwind to style the input ?

[ybrusentsov]

@GoshaOlegovich Yes, you can use the provided className props:

<PhoneInput
  className=""
  inputProps={{
    className: '',
  }}
  countrySelectorStyleProps={{
    className: '',
    flagClassName: '',
    buttonClassName: '',
    buttonContentWrapperClassName: '',
    dropdownArrowClassName: '',
    dropdownStyleProps: {
      className: '',
      listItemClassName: '',
      listItemFlagClassName: '',
      listItemDialCodeClassName: '',
      listItemCountryNameClassName: '',
      preferredListDividerClassName: '',
    },
  }}
  dialCodePreviewStyleProps={{
    className: '',
  }}
/>

[jpvalery]

Hi @goveo

Thanks for documenting this. I'm trying to change the background color of the flag button and the dropdown but it doesn't seem to be working.

countrySelectorStyleProps={{
className: '',
flagClassName: '',
buttonClassName: 'border border-white/10 hover:border-white/20 bg-white/20',
buttonContentWrapperClassName: '',
dropdownArrowClassName: '',
dropdownStyleProps: {
	className: 'focus:outline-none rounded-lg bg-white/20',
	listItemClassName: '',
	listItemFlagClassName: '',
	listItemDialCodeClassName: '',
	listItemCountryNameClassName: '',
	preferredListDividerClassName: '',
},
}}

Any idea what I might be missing here?

Thanks in advance,

EDIT: just needed to disable the import for the CSS—it's weird that the classes for the pinputProps were working but not the button.