Part 9: Display Property: Block, Inline, Hidden & Inline-Block

The CSS display property defines how an element is rendered in the document flow and how its children behave.

1. Display Utilities Overview

• block: Sets display: block. Takes up full available width and starts on a new line.
• inline-block: Flows inline with text but respects width, height, and vertical padding/margins.
• inline: Flows inline, ignores top/bottom margins and height.
• hidden: Sets display: none. Completely removes the element from visual and layout flow.

2. Responsive Toggling

Display utilities shine when combined with breakpoint modifiers:

<!-- Hidden on mobile, visible on medium screens and up -->
<nav class="hidden md:flex gap-6">
  <a href="/home">Home</a>
  <a href="/pricing">Pricing</a>
</nav>

<!-- Mobile Hamburger: Visible on mobile, hidden on medium screens and up -->
<button class="block md:hidden">
  🍔 Menu
</button>

3. Accessible Screen Reader Only (sr-only)

Hiding an element with hidden (display: none) also hides it from screen readers (assistive technologies). When you need an element hidden visually but accessible to screen readers, use sr-only:

<button>
  <svg class="size-6"><!-- Close icon --></svg>
  <span class="sr-only">Close modal window</span>
</button>

Key Takeaways

• Use hidden md:block to show/hide elements conditionally across viewport sizes.
• Never use hidden for icon button labels—use sr-only to ensure accessibility compliance.

In Part 10, we will master Positioning in Tailwind: Static, Relative, Absolute, Fixed & Sticky!