Display controls how an element participates in layout: block, inline, flex, grid, or none.
When to use
Switching layout modes, hiding elements, or making block elements flow inline with text.
Class combinations
Utilities stack. These recipes do more together than any single class alone. Try them after you've explored the sandbox above.
Visually hidden but accessible
sr-onlyRemoves content from layout while keeping it for screen readers. Prefer over display:none for labels.
Inline actions
inline-flex items-center gap-2Flex that participates in text flow, great for button groups inside paragraphs.
Summary
- display decides how an element participates in layout: block, inline, flex, grid, or removed entirely with none.
- block elements stack vertically and stretch to container width. inline-block sits in text flow but accepts box properties.
- Switching a parent to flex or grid changes how all direct children behave, not just the element itself.
- display: none removes the element from layout and accessibility tree. Use visibility or opacity when you only need to hide visually.
- In Tailwind, display utilities are the entry point before any flex or grid child utilities apply.