Tailwind: RadioButton appearing without style

[Neosoulink]

Describe the bug

Using the latest version of PrimeReact and wanting to use the RadioButton component, I realized that it was returning a default native radio button, unstyled. (see the screenshot)

.

This error behavior is happening on version 10.6.x and higher

Reproducer

https://stackblitz.com/edit/u8l8sa?file=src%2FApp.jsx

System Information

  System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    primereact: latest => 10.8.2 
    react: 18.3.1 => 18.3.1

Steps to reproduce the behavior

I forked the official example and even there it's not working

-> https://stackblitz.com/edit/u8l8sa?file=src%2FApp.jsx

Expected behavior

No response

[melloware]

Ahh its working fine with PR theme: https://primereact.org/radiobutton/ Its the TailWind theme that is incorrect.

I will mark this ticket as Tailwind related.

[Neosoulink]

Hum... I'm not sure, but I tried to remove all the styling and style getting the same behavior, is it really Tailwind?

As I mentioned, it's working fine on version 10.5.0

cc: @melloware

[melloware]

Yes see showcase with a PR theme it works fine: https://primereact.org/radiobutton/ fully themed so something in the TailWind theme is not right.

[melloware]

AS a note after 10.5.0 the RadioButton was updated and the PR themes were updated but it looks like the TailWind theme was not. I am not a Tailwind guy so a PR is welcome for anyone that wants to figure it out!

[melloware]

It actually the same as this Checkbox issue and Tailwind: #6423

Checkbox was fixed but Radiobutton wasn't if you want to look at that PR?

[melloware]

cc @gcko

[Neosoulink]

Yes It looks quite similar to #6423

And gcko's PR fix was mostly about adding classNames helper to the InputSwitch and CheckBox themes:

-  className: ['cursor-pointer inline-flex relative select-none align-bottom', 'w-6 h-6']
+  className: classNames('cursor-pointer inline-flex relative select-none align-bottom', 'w-6 h-6')

See https://github.com/primefaces/primereact/pull/6347/files#diff-db4f40d8ec882af74250a17beef920a061ae24422330815b84ac128b27761e0aL8-R17

However, the current RadioButton already uses the classNames helper...

radiobutton: ({ context }) => ({
  className: classNames(
    'flex justify-center items-center',
    'border-2 w-6 h-6 text-gray-700 rounded-full transition duration-200 ease-in-out',
    context.checked
      ? 'border-blue-500 bg-blue-500 dark:border-blue-400 dark:bg-blue-400'
      : 'border-gray-300 bg-white dark:border-blue-900/40 dark:bg-gray-900',
    {
      'hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]': !context.disabled,
      'cursor-default opacity-60': context.disabled
    }
  )
}),

See https://github.com/primefaces/primereact/blob/master/components/doc/radiobutton/theming/tailwinddoc.js#L9

But the checkbox is working on the latest version

[melloware]

If you look he also added an input section to the Checkbox i believe.

[Neosoulink]

Yes he did:

input: {
  className: classNames('absolute appearance-none top-0 left-0 size-full p-0 m-0 opacity-0 z-10 outline-none cursor-pointer')
},

[Neosoulink]

But no matter the changes I'm making, I'm still not able to apply a custom style to the RadioButton in the latest version of Primereact

[melloware]

@gcko can you take a look at this since you are familiar with Tailwind and the PR structures?

[gcko]

sure i'll take a look