Hide content from mobile version and make visible on desktop, using Tailwind CSS-CodePudding

I tried to use the Tailwind hidden class to hide content from my page on mobile screens only, but instead it becomes hidden for desktop and visible in the mobile version. I want the opposite.

My code:

<nav >abc</nav>

I also tried to use the visible and invisible utility classes, but that didn't work at all.

CodePudding user response：

Why don't you just use the @media query? You can show something on desktop and hide on mobile by using this css:

@media (max-width:1024px){
        .yourclassname {
            display:none;
        }

CodePudding user response：

You can simply use the sm breakpoint for mobile screens. And assign below class to that coomponent.

class = "hidden sm:block"

<script src="https://cdn.tailwindcss.com"></script>
<div ></div>
  
  <div >

  <!-- ignore this code of card -->
    <div >
      
      <div >
        <div >
          
          <ul >
            <li >
              <svg  stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="11" />
                <path d="m8 13 2.165 2.165a1 1 0 0 0 1.521-.126L16 9" fill="none" />
              </svg>
              <p >
                Customizing your
                <code >tailwind.config.js</code> file
              </p>
            </li>
            <li >
              <svg  stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="11" />
                <path d="m8 13 2.165 2.165a1 1 0 0 0 1.521-.126L16 9" fill="none" />
              </svg>
              <p >
                Extracting classes with
                <code >@apply</code>
              </p>
            </li>
            <li >
              <svg  stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="11" />
                <path d="m8 13 2.165 2.165a1 1 0 0 0 1.521-.126L16 9" fill="none" />
              </svg>
              <p >Code completion with instant preview</p>
            </li>
          </ul>
         
        </div>
      </div>
    </div>
  <!-- card code ends -->
  
  </div>
</div>

ANd you can also view the example here