Tailwind CSS Academy · Lesson

Show and Hide Elements Responsively

Use hidden, block, and inline-* with responsive prefixes to show and hide elements at specific screen sizes.

Why Show and Hide Responsively?

Different viewport sizes warrant different UI patterns. A desktop navigation shows all links in a horizontal bar, while mobile shows only a hamburger icon that opens a drawer. A data table with 8 columns on desktop might only show 3 key columns on mobile. Rather than building two separate UIs, Tailwind lets you show or hide elements at specific breakpoints using display utilities combined with responsive prefixes.

<!-- Hamburger visible on mobile, full nav on desktop -->
<nav class="flex items-center justify-between p-4">
  <span class="font-bold">MyApp</span>
  <!-- Full nav: hidden on mobile, visible on md+ -->
  <div class="hidden md:flex gap-6">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </div>
  <!-- Hamburger: visible on mobile, hidden on md+ -->
  <button class="md:hidden">
    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
    </svg>
  </button>
</nav>

The hidden and block Pattern

The two core utilities for responsive visibility are hidden (display: none) and block (display: block). To show something only on mobile: block md:hidden — it is block by default and becomes none at md+. To show something only on desktop: hidden md:block — none by default and becomes block at md+. These two patterns cover the vast majority of show/hide needs.

<!-- Two core show/hide patterns -->

<!-- Mobile-only element -->
<div class="block md:hidden bg-blue-100 p-3 rounded">
  This appears only on mobile (below md breakpoint)
</div>

<!-- Desktop-only element -->
<div class="hidden md:block bg-green-100 p-3 rounded">
  This appears only on md screens and wider
</div>

All lessons in this course

← Back to Tailwind CSS Academy