'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?

htmlcsslaraveltailwind-css


Solution 1:[1]

Change it to

<div class="hidden md:visible">

Solution 2:[2]

I had the same issue. I then realized that I had not written this in the terminal after quitting and coming back :

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

(replace input.css and output.css with your files) It worked for me after! :)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ali Alizadeh
Solution 2 Reuben B

Related Questions