Tailwind Display Utilities

What Are Display Utilities?

Display utilities map directly to the CSS display property. block, inline, inline-block, flex, inline-flex, grid, inline-grid, and hidden are the most commonly used values.

Choosing the right display value is often the first decision when building any layout, since it determines whether an element stacks, flows inline, or becomes a flex/grid container for its children.

<div class="flex gap-4">
  <span class="inline-block">Item A</span>
  <span class="inline-block">Item B</span>
</div>

The parent is a flex container; each child is inline-block, so its content still flows like text internally.

Display Utility Syntax

class="block | inline | inline-block | flex | inline-flex | grid | inline-grid | hidden"

• Each value maps one-to-one to a CSS display keyword.
• hidden sets display: none, removing the element from layout entirely.
• Responsive prefixes let you change display per breakpoint, like hidden md:block.
• flex/grid turn the element into a layout container for its direct children.

Display Utilities Cheatsheet

Every common display value and what it does.

block vs inline-block

block elements take the full available width and start on a new line. inline-block elements flow inline with surrounding text or elements, but still accept width, height, and vertical margin like a block element.

<p>
  Text before
  <span class="inline-block w-24 bg-blue-100 px-2 text-center">Badge</span>
  text after.
</p>

The badge sits inline with the paragraph text but still has a fixed width and its own background.

Toggling Visibility With Breakpoints

Combine hidden with a breakpoint-prefixed display value to show or hide elements based on screen size, a common pattern for mobile menus versus desktop navigation.

<div class="hidden lg:block">
  Desktop-only sidebar content.
</div>
<div class="block lg:hidden">
  Mobile-only summary content.
</div>

display: contents for Wrapper-Free Styling

contents makes an element's box disappear from layout entirely while keeping its children in the DOM, useful when a wrapper element is needed for markup or accessibility reasons but shouldn't affect grid or flex layout of its children.

<div class="grid grid-cols-3 gap-4">
  <div class="contents">
    <div>Child A</div>
    <div>Child B</div>
  </div>
  <div>Child C</div>
</div>

Child A and Child B participate directly in the grid as if the wrapping div weren't there.

Common Mistakes

• Using hidden when you meant invisible; hidden removes the element from layout, invisible keeps its space but hides it visually.
• Forgetting that inline elements ignore width, height, and vertical margin utilities.
• Applying flex or grid to an element with only one child, when a simple block would be simpler.
• Not testing hidden md:block toggles across every breakpoint, only the two extremes.
• Overusing display: contents without checking accessibility tree implications in older browsers.

Key Takeaways

• Display utilities map directly to CSS display values like block, flex, grid, and none.
• hidden removes an element from layout; invisible (covered in Opacity/visibility topics) hides it while preserving space.
• inline-block combines inline flow with block-level sizing capabilities.
• Responsive display toggling (hidden md:flex) is the standard way to build adaptive navigation.
• contents lets a wrapper's children join a parent grid or flex layout directly.