Visibility & Display Utilities

👁️ Visibility, Overflow, Cursor & Opacity

📐 What are visibility utilities used for?

Visibility utilities let you control whether elements are visible, how content overflows its container, which mouse cursor is displayed, and how transparent an element is.

They are designed as low-level helpers that can be combined with any component or layout to quickly adjust behavior without writing custom CSS.

💠 Examples

The examples below show how to use visibility, overflow, cursor, and opacity helpers.

.visible — the element is visible and takes up space.

.hidden — the element is hidden but still occupies layout space.

.overflow-hidden — extra content is clipped and not visible. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.overflow-auto — scrollbars appear when needed. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.overflow-visible — content can overflow the container. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.cursor-pointer — pointer cursor for clickable areas.

.cursor-not-allowed — indicates disabled or forbidden action.

.cursor-wait — shows that an operation is in progress.

.opacity-2 — 20% opacity.

.opacity-5 — 50% opacity.

.opacity-8 — 80% opacity.

.opacity-10 — fully opaque (100%).

💻 HTML Code

Visible content (.visible)

Content with hidden overflow (.overflow-hidden)

Content with automatic scrollbars (.overflow-auto)

Content with visible overflow (.overflow-visible)

Content scrollable only on Y axis (.overflow-y-auto)

Content scrollable only on X axis (.overflow-x-auto)

Hidden overflow on Y axis (.overflow-y-hidden)

Hidden overflow on X axis (.overflow-x-hidden)

Automatic cursor (.cursor-auto)

Pointer cursor (.cursor-pointer)

Not allowed cursor (.cursor-not-allowed)

Help cursor (.cursor-help)

Progress cursor (.cursor-progress)

Wait cursor (.cursor-wait)

Grab cursor (.cursor-grab)

Grabbing cursor (.cursor-grabbing)

Text cursor (.cursor-text)

Copy cursor (.cursor-copy)

Alias cursor (.cursor-alias)

Fully transparent (.opacity-0)

10% opacity (.opacity-1)

20% opacity (.opacity-2)

30% opacity (.opacity-3)

40% opacity (.opacity-4)

50% opacity (.opacity-5)

60% opacity (.opacity-6)

70% opacity (.opacity-7)

80% opacity (.opacity-8)

90% opacity (.opacity-9)

Fully opaque (.opacity-10)

📏 Visibility Utilities Overview

These utilities provide a small but powerful set of helpers to control visibility, overflow, cursors, and opacity at a glance.

.visible

Sets visibility: visible; to ensure the element is visible while keeping its layout space.

.hidden

Sets visibility: hidden;, hiding the element but preserving its layout space.

.overflow-hidden

Controls the overflow behavior on the corresponding axis or both axes.

.overflow-visible

Controls the overflow behavior on the corresponding axis or both axes.

.overflow-auto

Controls the overflow behavior on the corresponding axis or both axes.

.overflow-y-auto

Controls the overflow behavior on the corresponding axis or both axes.

.overflow-x-auto

Controls the overflow behavior on the corresponding axis or both axes.

.overflow-y-hidden

Controls the overflow behavior on the corresponding axis or both axes.

.overflow-x-hidden

Controls the overflow behavior on the corresponding axis or both axes.

.cursor-none