Tabs not showing as intended

[kevinvayro]

What component (if applicable)

• URL for category: https://tailwindui.com/components/application-ui/navigation/tabs

Describe the bug
All tab examples are showing as dropdown boxes rather than tabs as intended.

To Reproduce
https://play.tailwindcss.com/YFuDS0sEKo

Screenshots
Expected

Current

[reinink]

Hey there @kevinvayro! My apologies for the delay on this one—we've been super heads down working on the big v4.0 release and are a little behind on GitHub issues. Finally coming up for air after the release last week and catching up on things 😅

So this is actually the intended behavior for these components. When you're on mobile showing tabs can be problematic if there isn't enough space for them all. So we opt to switch from the tabs to a select input on mobile, as choosing items in a native select on mobile devices is generally a nice experience.

That said, that's not the only way you could handle this. You could:

1. Always show the tabs when you know there will always be sufficient space.
2. Add horizontal scrolling on mobile instead of using a select input.
3. Switch to some sort of vertical navigation on mobile.

You get the idea! We opted for a select input on mobile for these components, but you're welcome to modify them in your own project to better fit your particular needs.

Good luck! 🤙

[kevinvayro]

@reinink thanks for coming back to me. The behaviour was actually on desktop rather than mobile but I noticed a couple of weeks back that the examples were now showing correctly again.