Some tailwind styling like width is not working

[void-hr]

version of react-otp-input : ^3.0.4 Tailwind CSS width property is not working.

[prateek3255]

Can you please add a snippet or a sandbox to show a reproducible example?

[void-hr]

Below is snippet of package json

Code h-12 is working but w-12 is not working

Output @localhost:3000

[prateek3255]

@void-hr The code you shared looks fine, and I think the styles you added for the input are getting passed to the relevant inputs as well, which you can check by inspecting the input elements. If you still face any issues, do share a reproducible codesandbox so that we can debug it.

[void-hr]

@prateek3255 I am pasting the link of codesandbox, let me know in case you need anything CODESANDBOX

[void-hr]

@prateek3255 I was exploring a little bit, correct me if I am wrong maybe this issue is arising because width is assigned 1 rem as constant by default?

  style: Object.assign(
            { width: '1em', textAlign: 'center' } as const,
            isStyleObject(inputStyle) && inputStyle
          ),

[prateek3255]

Yeah I believe you are right, these styles exist for legacy reasons. I think we can expose a prop to not apply these styles for now, and then it can be removed with the next major version. Would you like to work on it @void-hr ?

[void-hr]

@prateek3255 Yeah Sure! I want to give it a try one more thing I want to mention is one can assign width with !important modifier than it will work.

[prateek3255]

Yeah ideally you shouldn't need to do that

[void-hr]

@prateek3255 can you suggest me some ways in which I can see visual changes while playing with code to get more idea of what particular changes are taking place.

[prateek3255]

Yeah you can run the example vite example which will show you live changes, as you make changes to the library code: https://github.com/devfolioco/react-otp-input#to-run-the-vite-example

[prateek3255]

This was fixed with v3.1.0

[ayush-sd]

This is not fixed, I am still facing this issue, width: 1rem is set on the element styles... Version: 3.1.0

Workaround is to explicitly set width to an empty string if you are using className for styling the input

<OtpInput
          value={otp}
          onChange={setOtp}
          numInputs={4}
          inputType="number"
          inputStyle="w-16 text-center aspect-square focus:outline-none focus:ring-1 rounded-md px-4 py-3 ring-[0.4px] ring-gray-500"
          renderInput={(props) => <input {...props} style={{ width: "" }} />}
        />

[abena07]

thanks this helped me! 🙏🏿