Display Utilities
Control the box type with block, inline, flex, grid and hidden.
Syntax
class="flex" / class="hidden md:block"Display utilities set the CSS display property.
block— full-width block.inline-block— flows inline but respects width/height.flex— flex container.grid— grid container.hidden— removes the element (display:none).
You can even hide on small screens and show on large: hidden md:block.
Example
Loading editor…
Press Run to see the result.
When to use it
- A developer converts a div into a flex container by adding the flex class without writing any display: flex CSS.
- A notification badge is made inline-flex so it sits next to text and still accepts padding and sizing utilities.
- A mobile menu is hidden on large screens with hidden and shown on small screens with block, toggled via JavaScript.
More examples
block vs inline-block
block forces the span to behave like a div (full row), while inline-block allows padding and sizing while staying in the text flow.
<span class="block bg-blue-100 p-2 mb-2">Block span takes full width</span>
<span class="inline-block bg-green-100 p-2">Inline-block fits content</span>Flex container
The flex utility turns the div into a flex container, laying children in a row and aligning them vertically with items-center.
<div class="flex gap-4 items-center">
<img class="w-10 h-10 rounded-full" src="avatar.jpg" alt="">
<span class="font-medium">User Name</span>
</div>Conditional display with hidden
hidden removes an element from layout entirely; md:flex restores it at the medium breakpoint, creating responsive show/hide behavior.
<nav class="hidden md:flex gap-6">
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
<button class="md:hidden p-2">
<span>Menu</span>
</button>
Discussion