htmlcsslaraveltailwind-css

Display hidden not working with flex in Tailwind

I'm trying to hide a div in mobile, and display flex with md screen & above, here's my code:

<div class="hidden md:flex">
            <x-navbar.nav-links :href="route('welcome')"> Home </x-navbar.nav-links>
            <x-navbar.nav-links :href="route('welcome')"> Shop </x-navbar.nav-links>
            <x-navbar.nav-links :href="route('welcome')"> About Us </x-navbar.nav-links>
            <x-navbar.nav-links :href="route('welcome')"> Contact </x-navbar.nav-links>   
   </div>

Apparently, the div is hidden all the time whether it's a md or sm or xl screen How can I fix this in Tailwind?

Solution

  • I have the same problem too and it is because of Chrome, If you use

    class="invisible md:visible md:flex"

    It will work on Chrome