Why Aren’t My Responsive Tailwind CSS Classes Working?

0
2
Asked By CuriousCoder42 On

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

Answered By TechSavant88 On

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.

DevGuru77 -

I tried `

`, but it still doesn't work. That div is getting the 'flex' display, but I'm puzzled as to why it’s not showing up.

Related Questions

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.