Helpers

Miscellaneous utilities for visibility, accessibility, interaction, and content display.

Visibility

Class	Property	Value
visible	visibility	visible
invisible	visibility	hidden

Unlike d-none, invisible hides the element but keeps its space in the document flow.

Accessibility

Class	Effect
sr-only	Visually hidden but readable by screen readers (absolute position, 1px clipped size)

Pointer events

Class	pointer-events
pointer-events-none	none
pointer-events-auto	auto

User select

Class	user-select
select-none	none
select-text	text
select-all	all
select-auto	auto

Object fit

Class	object-fit
object-contain	contain
object-cover	cover
object-fill	fill
object-none	none

Aspect ratio

Class	aspect-ratio
aspect-square	1 / 1
aspect-video	16 / 9
aspect-auto	auto

Line clamp

Class	Effect
line-clamp-1	Clamp to 1 line with …
line-clamp-2	Clamp to 2 lines
line-clamp-3	Clamp to 3 lines
line-clamp-4	Clamp to 4 lines
line-clamp-5	Clamp to 5 lines

Examples

<!-- Screen-reader only label -->
<button>
  <span aria-hidden="true">X</span>
  <span class="sr-only">Close dialog</span>
</button>

<!-- Non-clickable decorative overlay -->
<div class="pointer-events-none absolute inset-0">
  Decorative layer
</div>

<!-- Responsive video thumbnail -->
<div class="aspect-video overflow-hidden radius-8">
  <img class="w-100 h-100 object-cover" src="thumbnail.jpg" />
</div>

<!-- Square icon box -->
<div class="aspect-square d-flex items-center justify-center bg-blue radius-4" style="width: 48px">
  <i class="icon text-white"></i>
</div>

<!-- Truncated description -->
<p class="line-clamp-2">
  A very long product description that will be clamped after the second line...
</p>

<!-- Prevent text selection -->
<div class="select-none">This text cannot be selected</div>