Display Utilities

The display property is the foundation of every layout. In Tailwind it is just a set of one-word utilities.

The Core Set

<span class="block">forced onto its own line</span>
<div class="inline-block">flows inline but takes width/height</div>
<div class="flex">flex container</div>
<div class="grid">grid container</div>
<div class="hidden">removed from layout entirely</div>
<div class="contents">box disappears, children stay</div>

hidden sets display: none — the element is gone from layout and the accessibility tree. contents is a niche but handy one: the wrapper box vanishes while its children participate in the parent layout.

Responsive Show and Hide

Combining display with breakpoints gives you the classic responsive navigation pattern: a menu that is hidden on mobile and flex on desktop.

<nav class="flex items-center justify-between">
  <a href="/">Logo</a>

  <!-- Desktop links -->
  <ul class="hidden md:flex gap-6">
    <li><a href="/docs">Docs</a></li>
    <li><a href="/pricing">Pricing</a></li>
  </ul>

  <!-- Mobile hamburger -->
  <button class="md:hidden">Menu</button>
</nav>

hidden md:flex keeps the list out of the mobile layout, then turns it into a flex row from md up. The hamburger does the reverse with md:hidden.

Accessible Hiding with sr-only

hidden removes content for everyone, including screen readers. When you want something visually gone but still announced — an icon button’s label, for instance — use sr-only:

<button>
  <svg aria-hidden="true"><!-- icon --></svg>
  <span class="sr-only">Close dialog</span>
</button>

sr-only clips the element to a single pixel while keeping it in the accessibility tree. not-sr-only reverses it (useful for revealing a skip link on focus).