Visibility

Utilities for controlling the visibility of an element.

Use to hide an element, but still maintain its place in the DOM, affecting the layout of other elements (compare with hidden from the documentation).

This makes it possible to dynamically toggle rows and columns without affecting the table layout.

Use visible to make an element visible. This is mostly useful for undoing the invisible utility at different screen sizes.

Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use to only apply the invisible utility on hover.

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:invisible to apply the utility at only medium screen sizes and above.