bug: tabs components example not working

[ChenaLee]

What version of daisyUI are you using?

v4.6.0

Which browsers are you seeing the problem on?

Chrome

Reproduction URL

https://play.tailwindcss.com/Wevz2RS6c4

Describe your issue

In the official document, jsx examples are not working as expected.
Other components so far have all been working as documented.

Relevant section: radio tab bordered + tab content
Example provided in the official doc:

<div role="tablist" className="tabs tabs-bordered">
  <input type="radio" name="my_tabs_1" role="tab" className="tab" aria-label="Tab 1" />
  <div role="tabpanel" className="tab-content p-10">Tab content 1</div>

  <input type="radio" name="my_tabs_1" role="tab" className="tab" aria-label="Tab 2" checked />
  <div role="tabpanel" className="tab-content p-10">Tab content 2</div>

  <input type="radio" name="my_tabs_1" role="tab" className="tab" aria-label="Tab 3" />
  <div role="tabpanel" className="tab-content p-10">Tab content 3</div>
</div>

Expected:

Actual:

Problem:

• Style is different

Solution:

• Changing the tabs to element worked

<div className="tabs tabs-bordered" role="tablist">
            {navigation.map((item) => (
                    <button role="tab" onClick={() => setSelectedTabName(item.name)} className={selectedTabName === item.name ? "tab tab-active" : "tab"}> {item.name} </button>
              ))}
</div>

[github-actions]

Thank you @ChenaLee for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.

[saadeghi]

FAQ, second question: #1949

checkbox/toggle/radio styles are broken

Probably you're using @tailwindcss/forms (or another style or plugin) that is affecting form elements.
daisyUI applies styles to class names but @tailwindcss/forms by default, applies styles to all form elements.
If you really need @tailwindcss/forms alongside with daisyUI (which I doubt, because both are doing the same job) consider using its strategy: 'class' config so it only applies style to the elements with specific class name (not all form elements)

Let me know if you have a question.

[danfmn]

I reviewed the FAQ and I'm also experiencing this issue. I'm not utilizing @tailwindcss/forms. The issue occurs with the radios related to tabs. I'm able to use checkboxes/toggles just fine.

Update: I was on a much older version. Bumping to 4.6.0 resolved my issues.

[ChenaLee]

Thanks!