0Pricing
Tailwind CSS Academy · Ders

Öğeleri Duyarlı Şekilde Gösterme ve Gizleme

Belirli ekran boyutlarında öğeleri göstermek ve gizlemek için hidden, block ve inline-* sınıflarını duyarlı ön eklerle kullanın.

Öğeleri Duyarlı Şekilde Gösterme ve Gizleme, CoddyKit'te ücretsiz bir Tailwind CSS Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Tailwind CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Tailwind CSS Academy kursu toplamda 4 dersten oluşur.

Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.

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>

Targeting a Specific Breakpoint Range

To show an element only within a specific range — for example, only on tablets (sm to lg, not mobile and not desktop) — combine mobile-hide, show-at-sm, and hide-at-lg: hidden sm:block lg:hidden. This reads: hidden by default, visible at sm, hidden again at lg. This three-class combination isolates the element to the tablet viewport range.

<!-- Show element only on specific viewport ranges -->
<div class="space-y-2">
  <!-- Only on mobile (< sm) -->
  <div class="bg-red-100 p-2 rounded block sm:hidden">Mobile only (&lt;640px)</div>

  <!-- Only on tablets (sm to md) -->
  <div class="bg-yellow-100 p-2 rounded hidden sm:block md:hidden">Small tablet only</div>

  <!-- Only on desktop (lg+) -->
  <div class="bg-green-100 p-2 rounded hidden lg:block">Desktop only (1024px+)</div>

  <!-- On all screens -->
  <div class="bg-blue-100 p-2 rounded">Always visible</div>
</div>

Using flex and grid Instead of block

When an element should be visible as a flex container (not just a block) on certain breakpoints, use hidden md:flex instead of hidden md:block. This is critical for navigation bars, toolbar rows, and card rows that need flex behavior. hidden md:flex items-center gap-4 hides on mobile and reveals as a flex container with alignment on desktop.

<!-- Navigation: hidden on mobile, flex row on desktop -->
<header class="flex items-center justify-between px-6 py-4 border-b">
  <span class="font-bold text-lg">Brand</span>

  <!-- Desktop nav: flex row with spacing -->
  <nav class="hidden md:flex items-center gap-6">
    <a href="#" class="text-gray-600 hover:text-gray-900 text-sm">Products</a>
    <a href="#" class="text-gray-600 hover:text-gray-900 text-sm">Pricing</a>
    <a href="#" class="text-gray-600 hover:text-gray-900 text-sm">Blog</a>
    <button class="bg-blue-600 text-white text-sm px-4 py-2 rounded-lg">Sign In</button>
  </nav>

  <!-- Mobile hamburger -->
  <button class="md:hidden p-2">
    <span class="block w-5 h-0.5 bg-gray-700 mb-1"></span>
    <span class="block w-5 h-0.5 bg-gray-700 mb-1"></span>
    <span class="block w-5 h-0.5 bg-gray-700"></span>
  </button>
</header>

Responsive Table Columns

Data tables on mobile present a challenge — too many columns make the table horizontally scrollable and hard to read. A common solution is hiding less important columns on small screens. Apply hidden md:table-cell to non-essential table columns — they become display: table-cell on tablet and desktop, but are completely hidden on mobile, keeping the table usable on small screens.

<!-- Responsive table: hide secondary columns on mobile -->
<div class="overflow-x-auto">
  <table class="w-full text-sm">
    <thead>
      <tr class="bg-gray-50 text-left">
        <th class="p-3 font-semibold">Name</th>
        <!-- Hidden on mobile -->
        <th class="hidden md:table-cell p-3 font-semibold">Email</th>
        <th class="p-3 font-semibold">Status</th>
        <!-- Hidden on mobile -->
        <th class="hidden lg:table-cell p-3 font-semibold">Joined</th>
        <th class="p-3 font-semibold">Actions</th>
      </tr>
    </thead>
    <tbody class="divide-y">
      <tr class="hover:bg-gray-50">
        <td class="p-3">Alice Johnson</td>
        <td class="hidden md:table-cell p-3 text-gray-500">alice@example.com</td>
        <td class="p-3"><span class="bg-green-100 text-green-700 px-2 py-0.5 rounded text-xs">Active</span></td>
        <td class="hidden lg:table-cell p-3 text-gray-500">Jan 2024</td>
        <td class="p-3"><button class="text-blue-600 text-sm">Edit</button></td>
      </tr>
    </tbody>
  </table>
</div>

inline-flex and inline-block Variants

For inline elements, use hidden md:inline-flex or hidden md:inline-block to maintain inline behavior alongside sibling text when the element becomes visible. A badge inside a heading, an icon inside a link, or a price tag inline with a product name all need inline or inline-flex display. Using plain block would break the text flow.

<!-- Inline badge reveals on desktop -->
<h2 class="flex items-center gap-2 text-xl font-bold">
  Pro Features
  <!-- Badge: hidden on mobile, inline-flex on desktop -->
  <span class="hidden md:inline-flex items-center gap-1 bg-purple-100 text-purple-700 text-xs font-semibold px-2 py-0.5 rounded-full">
    ✨ New
  </span>
</h2>

<!-- Inline text suffix hides on mobile -->
<button class="flex items-center gap-1 text-sm text-blue-600">
  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
  </svg>
  <span class="hidden sm:inline">Download</span>
</button>

Visibility vs Display for Hidden Elements

Tailwind also provides invisible and visible utilities that use CSS visibility: hidden instead of display: none. The key difference: hidden (display:none) removes the element from the layout flow, collapsing its space. invisible hides the element visually but preserves its space in the layout. Use invisible when you need the element to hold its place but not be seen.

<!-- display:none collapses space; visibility:hidden preserves it -->
<div class="space-y-4">
  <p>Above</p>

  <!-- hidden: collapses, no space reserved -->
  <div class="hidden bg-red-100 p-4 rounded">Hidden (no space)</div>

  <!-- invisible: space preserved, element not seen -->
  <div class="invisible bg-blue-100 p-4 rounded">Invisible (space held)</div>

  <p>Below</p>
</div>

Responsive Sidebar Toggle

A very common pattern is a sidebar that is permanently visible on desktop but hidden by default on mobile (revealed only when a hamburger is clicked). On desktop, the sidebar is always visible via hidden md:block. On mobile, JavaScript toggles a class to show/hide it — but Tailwind handles the initial visibility. This pattern requires the sidebar to exist in the DOM at all times for SEO and screen reader accessibility.

<!-- Sidebar: always on desktop, togglable on mobile -->
<div class="flex min-h-screen">
  <!-- Sidebar: hidden on mobile, always visible on md+ -->
  <aside class="hidden md:block w-64 shrink-0 bg-gray-900 text-white p-6">
    <nav class="space-y-2">
      <a href="#" class="block px-3 py-2 rounded hover:bg-gray-800">Dashboard</a>
      <a href="#" class="block px-3 py-2 rounded hover:bg-gray-800">Users</a>
      <a href="#" class="block px-3 py-2 rounded hover:bg-gray-800">Settings</a>
    </nav>
  </aside>
  <!-- Main content -->
  <main class="flex-1 p-6">
    <!-- Mobile menu button -->
    <button class="md:hidden mb-4 bg-gray-900 text-white px-3 py-2 rounded">
      Menu
    </button>
    <h1 class="text-2xl font-bold">Content</h1>
  </main>
</div>

Conditional Text Labels

Icon-only buttons on mobile that show text labels on desktop are a space-saving convention used by many apps. The icon is always visible, but the text label uses hidden sm:inline to appear only on wider screens. This keeps the mobile UI compact while making the desktop version more descriptive. Screen reader users always see the accessible label through aria-label on the button.

<!-- Toolbar: icon-only on mobile, icon+label on desktop -->
<div class="flex items-center gap-2 p-3 border-b">
  <button aria-label="Save" class="flex items-center gap-1.5 px-3 py-2 rounded-lg hover:bg-gray-100">
    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4" />
    </svg>
    <span class="hidden sm:inline text-sm">Save</span>
  </button>
  <button aria-label="Share" class="flex items-center gap-1.5 px-3 py-2 rounded-lg hover:bg-gray-100">
    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m6.632 8.684A9 9 0 1110.7 3.294" />
    </svg>
    <span class="hidden sm:inline text-sm">Share</span>
  </button>
</div>

Showing Only on Specific Devices

For very precise control, you can target a single breakpoint range with two classes. To show an element only at md (768px to 1023px): hidden md:block lg:hidden. To show only at lg and xl but not 2xl: hidden lg:block 2xl:hidden. These multi-class combinations give you fine control over what appears at each viewport width, allowing completely different content presentation strategies per device class.

<!-- Elements visible on exactly one breakpoint range -->
<div class="p-4 space-y-2">
  <!-- Shows only on sm (640-767px) -->
  <div class="hidden sm:block md:hidden bg-pink-100 p-2 rounded text-sm">
    Small screen only (640-767px)
  </div>
  <!-- Shows only on md (768-1023px) -->
  <div class="hidden md:block lg:hidden bg-orange-100 p-2 rounded text-sm">
    Medium screen only (768-1023px)
  </div>
  <!-- Shows only on lg (1024-1279px) -->
  <div class="hidden lg:block xl:hidden bg-lime-100 p-2 rounded text-sm">
    Large screen only (1024-1279px)
  </div>
</div>

Accessibility Notes for Hidden Elements

Elements hidden with hidden (display:none) are also hidden from screen readers and excluded from the accessibility tree — which is usually the correct behavior. But if you need to hide something visually while keeping it accessible to screen readers, use sr-only instead. Conversely, if you want to hide content from screen readers but show it visually, use aria-hidden='true' on the element. Choose the right hiding technique based on your accessibility intent.

<!-- Three hiding techniques with different a11y behavior -->

<!-- 1. Visual + screen reader hidden (most common) -->
<div class="hidden md:block">Full description for desktop</div>

<!-- 2. Visually hidden but screen-reader visible -->
<span class="sr-only">Close dialog</span>

<!-- 3. Visually visible but screen-reader hidden -->
<div aria-hidden="true" class="text-3xl">🎉</div>

Quick Check

Test your understanding of Tailwind CSS Mastery concepts from this lesson.

Lesson Recap

In this lesson you learned: hidden md:block shows an element only on md screens and wider, block md:hidden shows an element only on mobile below the md breakpoint, and hidden sm:block md:hidden targets a single breakpoint range like sm-to-md only. This completes the Responsive Design Breakpoints course — next we explore dark mode with Tailwind.

Sıkça Sorulan Sorular

“Öğeleri Duyarlı Şekilde Gösterme ve Gizleme” dersi ücretsiz mi?

Evet — “Öğeleri Duyarlı Şekilde Gösterme ve Gizleme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Tailwind CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Tailwind CSS Academy kursu toplamda 4 dersten oluşur.

“Öğeleri Duyarlı Şekilde Gösterme ve Gizleme” dersinde ne öğreneceğim?

Belirli ekran boyutlarında öğeleri göstermek ve gizlemek için hidden, block ve inline-* sınıflarını duyarlı ön eklerle kullanın. Tailwind CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Tailwind CSS Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Tailwind CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“Öğeleri Duyarlı Şekilde Gösterme ve Gizleme” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Tailwind CSS Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Tailwind CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Tailwind'in Kesme Noktası Sistemi
  2. Flex ve Izgarayla Duyarlı Düzenler
  3. Duyarlı Tipografi ve Boşluk
  4. Öğeleri Duyarlı Şekilde Gösterme ve Gizleme
← Tailwind CSS Academy Sayfasına Dön