Tailwind Visibility and Display to CSS

Tailwind Visibility and Display in CSS

Tailwind provides classes for both the display property and the visibility property. Understanding the difference between them is crucial for accessibility and layout behavior.

Display Classes

/* hidden */
display: none;

/* block */
display: block;

/* inline-block */
display: inline-block;

/* inline */
display: inline;

/* flex */
display: flex;

/* grid */
display: grid;

/* contents */
display: contents;

/* table */
display: table;

/* flow-root */
display: flow-root;

Visibility Classes

/* visible */
visibility: visible;

/* invisible */
visibility: hidden;

/* collapse */
visibility: collapse;

display:none vs visibility:hidden

The key difference:

Property	Element in layout?	Accessible to screen readers?
display: none	No	No
visibility: hidden	Yes (occupies space)	No

• hidden (display: none) removes the element from the document flow entirely. No space is reserved.
• invisible (visibility: hidden) hides the element visually but it still occupies its space in the layout.

When to Use Each

• hidden: Mobile-only elements (md:block hidden), conditionally rendered UI
• invisible: Placeholder spacing, transitioning elements that need to maintain layout
• contents: Wrapper elements that should not generate a box (useful for semantic HTML that should not affect flex/grid layout)
• flow-root: Creating a new block formatting context to contain floats

Responsive Display

In Tailwind, responsive display is common: hidden md:block means hidden on mobile, visible block on medium screens. In CSS, this translates to a media query:

.element { display: none; }
@media (min-width: 768px) { .element { display: block; } }