Display Utilities

Definition

Utilities for controlling the display box type of an element, mapping directly to the CSS `display` property.

Explain Like I'm New

Controlling how an element flows on the page. Is it a block (takes up the whole row)? Is it inline (sits next to text)? Is it hidden completely?

Real World Example

Using `hidden md:block` on a mobile hamburger menu to hide the desktop navigation links on phones, but show them on laptops.

Common Use Cases

•Hiding/showing elements
•Changing element flow behavior

Interactive Example

Interview Questions

basic

What Tailwind class applies `display: none`?

intermediate

What is the difference between `inline` and `inline-block`?

Flash Cards

Question

Class for display: none?

Click to reveal answer

Answer

`hidden`

Question

inline vs inline-block?

Click to reveal answer

Answer

`inline` elements (like `<span>`) ignore width, height, top/bottom margins, and top/bottom padding. `inline-block` allows the element to sit inline with text, but still respect width, height, and margins.