I'm working on a NavBar component using Tailwind CSS, and I'm facing an issue where the responsive classes aren't functioning as expected. I'm using Shadcn, Tailwind 4.1.5, React 19, and Vite 6.3.1. Here's a snippet of my code where the problem seems to lie:
```javascript
The `hidden` class isn't being overridden by `md:flex`, so the elements remain hidden on medium screens and larger. I've tried changing the class to `invisible` and tested various combinations, but nothing seems to work as intended. Any ideas on how to fix this? Also, I'm curious to know if there's a way to make the layout change from column to row at the `md` breakpoint as well. Thanks in advance!
1 Answer
You could try using the `invisible` and `md:visible` classes instead of `hidden`. Check out the Tailwind CSS documentation on visibility for insights on that.
I tried `