Question 45580 in CSS Question posted in
Some basic documentation can be found here.

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

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 class="hidden lg:block">abc</nav>

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

Tags:

2

Answers


  1. 0

    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;
        }
    Login or Signup to reply.
  2. 0

    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 class="absolute inset-0 bg-slate-400 bg-center"></div>
  
  <div class="hidden sm:block relative bg-white px-6 pt-10 mt-10 pb-8 sm:mx-auto sm:max-w-lg sm:rounded-lg sm:px-10">

  <!-- ignore this code of card -->
    <div class="mx-auto max-w-md">
      
      <div class="divide-y divide-gray-300/50">
        <div class="space-y-6 py-8 text-base leading-7 text-gray-600">
          
          <ul class="space-y-4">
            <li class="flex items-center">
              <svg class="h-6 w-6 flex-none fill-sky-100 stroke-sky-500 stroke-2" 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 class="ml-4">
                Customizing your
                <code class="text-sm font-bold text-gray-900">tailwind.config.js</code> file
              </p>
            </li>
            <li class="flex items-center">
              <svg class="h-6 w-6 flex-none fill-sky-100 stroke-sky-500 stroke-2" 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 class="ml-4">
                Extracting classes with
                <code class="text-sm font-bold text-gray-900">@apply</code>
              </p>
            </li>
            <li class="flex items-center">
              <svg class="h-6 w-6 flex-none fill-sky-100 stroke-sky-500 stroke-2" 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 class="ml-4">Code completion with instant preview</p>
            </li>
          </ul>
         
        </div>
      </div>
    </div>
  <!-- card code ends -->
  
  </div>
</div>

    ANd you can also view the example here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search