Display

Controls how an element is rendered in the document flow. The display property is one of the most important CSS properties for controlling layout and behavior. It determines if an element generates a block or inline box, or a different type of formatting context like flex, grid, or none (hidden). In Tailwind v4, all display utilities benefit from improved compatibility with OKLCH colors and other modern CSS features.

Layout1 variant3 examples

Official Docs Open Playground

Basic usage:

<div class="block">Block element takes full width</div>
<span class="inline">Inline element</span>
<span class="inline">takes only needed width</span>

Examples

Basic block and inline display

<div class="block">Block element takes full width</div>
<span class="inline">Inline element</span>
<span class="inline">takes only needed width</span>

Edit in playground

Responsive display showing/hiding elements based on screen size

<div class="hidden sm:block">
  This content is hidden on mobile but visible on sm screens and up
</div>

Edit in playground

Real-world responsive navigation using display utilities

<!-- Common display patterns -->
<nav class="bg-gray-100 p-4">
  <div class="container mx-auto flex items-center justify-between">
    <div class="text-xl font-bold">Logo</div>
    <!-- Hidden on mobile, block on md and up -->
    <div class="hidden md:block">
      <div class="flex gap-4">
        <a href="#" class="text-blue-500 hover:text-blue-700">Home</a>
        <a href="#" class="text-blue-500 hover:text-blue-700">About</a>
        <a href="#" class="text-blue-500 hover:text-blue-700">Contact</a>
      </div>
    </div>
    <!-- Visible on mobile only -->
    <button class="block 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"></path>
      </svg>
    </button>
  </div>
</nav>

Edit in playground

Live Preview

Try the Display utility with different values

Open Interactive Playground

Variants

block: generates a block element box, inline: generates an inline element, inline-block: generates an inline-level block container, flex: generates a flex container, grid: generates a grid container, hidden: removes the element from the flow and makes it invisible, flow-root: generates a block element with its own block formatting context, contents: makes the container disappear, preserving its children

blockinline-blockinlineflexinline-flexgridinline-gridtableinline-tabletable-rowtable-cellflow-rootcontentshidden