Skip to content

Tailwind CSS Display and Visibility — Show, Hide, and Overflow Control

DodaTech Updated 2026-06-28 6 min read

In this tutorial, you will learn about Tailwind CSS Display and Visibility. We cover key concepts, practical examples, and best practices to help you master this topic.

Tailwind CSS display utilities control how elements render: block, inline, inline-block, flex, grid, table, hidden, and responsive visibility with visible, invisible, and overflow handling.

What You'll Learn

You will learn the differences between display values, how to show and hide elements responsively, control overflow behavior, and use visibility vs display none.

Why It Matters

Display control is fundamental to layout. DodaTech uses responsive display utilities for mobile menus (hidden md:flex), overflow handling for content areas, and visibility for accessible hidden content.

Real-World Use

Doda Browser's responsive sidebar uses hidden md:block to hide on mobile and show on desktop, while the mobile menu toggle uses block md:hidden to show only on small screens.

flowchart LR
    A[Positioning] --> B[Display]
    B --> C[Block/Inline]
    B --> D[Hidden]
    B --> E[Overflow]
    B --> F[Responsive]
    style B fill:#38bdf8,stroke:#0284c7,color:#fff
    style C fill:#22c55e,stroke:#16a34a,color:#fff

Block vs Inline vs Inline-Block

<div class="space-y-4 p-4">
  <div class="bg-blue-100 p-2 rounded">
    <span class="block bg-blue-300 px-2 rounded">block - takes full width</span>
    <span class="block bg-blue-400 text-white px-2 rounded mt-1">another block on new line</span>
  </div>

  <div class="bg-green-100 p-2 rounded">
    <span class="inline bg-green-300 px-2 rounded">inline - sits in text</span>
    <span class="inline bg-green-400 text-white px-2 rounded">next to each other</span>
    <span class="text-sm">(width/height not respected)</span>
  </div>

  <div class="bg-purple-100 p-2 rounded">
    <span class="inline-block bg-purple-300 px-4 py-2 rounded">inline-block</span>
    <span class="inline-block bg-purple-400 text-white px-4 py-2 rounded">respects width/height</span>
    <span class="text-sm">(sits inline but has box)</span>
  </div>
</div>

Expected output: Block items stack vertically. Inline items flow horizontally but ignore width/height. Inline-block items flow horizontally while respecting dimensions.

Hidden and Visible

<div class="space-y-4 p-4">
  <div class="bg-gray-100 p-3 rounded">
    <span class="bg-blue-100 px-2 py-1 rounded">Visible element</span>
    <span class="invisible bg-blue-200 px-2 py-1 rounded">Invisible (takes space)</span>
    <span class="bg-blue-300 px-2 py-1 rounded">After invisible</span>
    <p class="text-sm text-gray-500 mt-1">The invisible span is not seen but occupies space.</p>
  </div>

  <div class="bg-gray-100 p-3 rounded">
    <span class="bg-green-100 px-2 py-1 rounded">Visible element</span>
    <span class="hidden bg-green-200 px-2 py-1 rounded">Hidden (removed from flow)</span>
    <span class="bg-green-300 px-2 py-1 rounded">After hidden</span>
    <p class="text-sm text-gray-500 mt-1">The hidden span is removed from layout entirely.</p>
  </div>
</div>

Expected output: Invisible elements maintain their space. Hidden elements collapse and take no space.

Responsive Visibility

<div class="p-4">
  <!-- Mobile menu button - only visible on small screens -->
  <div class="block md:hidden bg-blue-500 text-white p-3 rounded mb-4 text-center">
    Mobile Menu Button (visible only on mobile)
  </div>

  <!-- Desktop sidebar - hidden on mobile, visible on desktop -->
  <div class="hidden md:block bg-gray-100 p-4 rounded">
    <h3 class="font-bold">Sidebar (visible on md+ screens)</h3>
    <ul class="mt-2 space-y-1">
      <li class="text-gray-600">Navigation Item 1</li>
      <li class="text-gray-600">Navigation Item 2</li>
      <li class="text-gray-600">Navigation Item 3</li>
    </ul>
  </div>

  <!-- Content that changes display -->
  <div class="mt-4 flex flex-col md:flex-row gap-2">
    <div class="bg-purple-100 p-3 rounded flex-1">Stack on mobile</div>
    <div class="bg-purple-200 p-3 rounded flex-1">Side by side on desktop</div>
  </div>
</div>

Expected output: Elements show or hide based on viewport size using responsive display utilities.

Overflow Control

<div class="grid grid-cols-2 gap-4 p-4 max-w-lg mx-auto">
  <div>
    <h4 class="font-bold mb-1 text-sm">overflow-auto</h4>
    <div class="h-20 overflow-auto bg-gray-50 p-2 rounded border text-sm text-gray-600">
      <p>Content that extends beyond the box height will trigger a scrollbar.</p>
      <p class="mt-2">This allows users to scroll to see the rest.</p>
      <p class="mt-2">More content that requires scrolling.</p>
      <p class="mt-2">Even more content below the fold.</p>
    </div>
  </div>

  <div>
    <h4 class="font-bold mb-1 text-sm">overflow-hidden</h4>
    <div class="h-20 overflow-hidden bg-gray-50 p-2 rounded border text-sm text-gray-600">
      <p>Content that extends beyond the box is clipped and hidden.</p>
      <p class="mt-2">Users cannot scroll to see the hidden content.</p>
      <p class="mt-2">This content is cut off.</p>
      <p class="mt-2">Also cut off from view.</p>
    </div>
  </div>

  <div>
    <h4 class="font-bold mb-1 text-sm">overflow-scroll</h4>
    <div class="h-20 overflow-scroll bg-gray-50 p-2 rounded border text-sm text-gray-600">
      <p>Always shows scrollbar even if content fits.</p>
    </div>
  </div>

  <div>
    <h4 class="font-bold mb-1 text-sm">overflow-visible</h4>
    <div class="h-20 overflow-visible bg-gray-50 p-2 rounded border text-sm text-gray-600 relative">
      <p>Content overflows the box visibly.</p>
      <p class="mt-2">This content is visible outside the container.</p>
    </div>
  </div>
</div>

Expected output: Four overflow behaviors: auto (scroll when needed), hidden (clip), scroll (always show bar), visible (overflow outside box).

Table Display

<div class="table w-full border-collapse max-w-md mx-auto">
  <div class="table-header-group bg-gray-100">
    <div class="table-row">
      <div class="table-cell border px-4 py-2 font-bold">Name</div>
      <div class="table-cell border px-4 py-2 font-bold">Role</div>
      <div class="table-cell border px-4 py-2 font-bold">Status</div>
    </div>
  </div>
  <div class="table-row-group">
    <div class="table-row">
      <div class="table-cell border px-4 py-2">Alice</div>
      <div class="table-cell border px-4 py-2">Developer</div>
      <div class="table-cell border px-4 py-2 text-green-600">Active</div>
    </div>
    <div class="table-row">
      <div class="table-cell border px-4 py-2">Bob</div>
      <div class="table-cell border px-4 py-2">Designer</div>
      <div class="table-cell border px-4 py-2 text-yellow-600">Away</div>
    </div>
  </div>
</div>

Expected output: A table rendered using display:table classes, useful for email-compatible HTML or semantic table alternatives.

Common Mistakes

1. Using hidden When invisible Is Needed

hidden removes the element from layout (display: none). invisible keeps the space but hides visually (visibility: hidden).

2. Forgetting Responsive Prefix Order

md:hidden lg:block means hidden on tablet but visible on desktop. The order matters for override behavior.

3. Not Setting a Height for Overflow

Overflow needs a defined height (or max-height) to know when to clip. Without it, content expands and never overflows.

4. Using block When inline-block Is Needed

block elements take the full width. For elements that should sit next to each other but have box properties, use inline-block.

5. Hiding Important Content from Screen Readers

hidden hides from all users including screen readers. Use sr-only for content that should be accessible only to screen readers.

Practice Questions

  1. What is the difference between hidden and invisible? hidden removes from flow (display: none). invisible hides visually but keeps space (visibility: hidden).

  2. How do you show an element only on desktop? hidden md:block hides on mobile and shows on medium screens and above.

  3. How do you show an element only on mobile? block md:hidden shows on mobile and hides on medium screens and above.

  4. What display values are available for layout? block, inline, inline-block, flex, grid, table, table-cell, table-row, contents, flow-root, and hidden.

  5. How do you make text not wrap? Use whitespace-nowrap alongside overflow control.

Challenge

Build a responsive navigation: hamburger icon (visible on mobile, hidden on desktop), nav links (hidden on mobile, flex on desktop), and a dropdown menu (absolute, hidden by default, visible on hover).

FAQ

What does sr-only do?

sr-only hides content visually but keeps it accessible to screen readers. Useful for accessibility labels.

Can I animate display changes?

No, CSS cannot animate display. Use visibility, opacity, or height transitions instead.

What is the difference between overflow-auto and overflow-scroll?

overflow-auto shows scrollbar only when content exceeds the container. overflow-scroll always shows the scrollbar.

Does hidden work with flex children?

Yes. hidden (display: none) removes a flex child from the flex container entirely.

How do I hide an element but keep it for SEO?

Do not use CSS to hide content for SEO purposes. Use hidden for UI elements only.

Mini Project

Build a responsive navbar: logo (inline-block), nav links (hidden md:flex with gap), mobile menu button (block md:hidden), dropdown (absolute, hidden, hover:block). Toggle overflow on the menu container.

What's Next

Now master Responsive Design with breakpoint prefixes. Learn responsive patterns for mobile-first layouts and adaptive components.

← Previous Tailwind CSS Positioning — Relative, Absolute, Fixed, and Sticky Next → Tailwind CSS Responsive Design — Breakpoints and Mobile-First

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Tailwind Css