Помощники

Вспомогательные утилиты для видимости, доступности, взаимодействия и отображения контента.

Видимость

Класс

Свойство

Значение

visible

visibility

visible

invisible

visibility

hidden

Отличие от d-none: invisible скрывает элемент, но сохраняет его в потоке документа.

Доступность

Класс

Эффект

sr-only

Элемент видим только скринридерам (position absolute, clip, size 1px)

Pointer events

Класс

pointer-events

pointer-events-none

none

pointer-events-auto

auto

Выделение текста (user-select)

Класс

user-select

select-none

none

select-text

text

select-all

all

select-auto

auto

Object fit

Класс

object-fit

object-contain

contain

object-cover

cover

object-fill

fill

object-none

none

Соотношение сторон (aspect-ratio)

Класс

aspect-ratio

aspect-square

1 / 1

aspect-video

16 / 9

aspect-auto

auto

Ограничение строк (line-clamp)

Класс

Эффект

line-clamp-1

Ограничить 1 строкой с …

line-clamp-2

Ограничить 2 строками

line-clamp-3

Ограничить 3 строками

line-clamp-4

Ограничить 4 строками

line-clamp-5

Ограничить 5 строками

Примеры

<!-- Метка только для скринридеров -->
<button>
  <span aria-hidden="true">X</span>
  <span class="sr-only">Закрыть диалог</span>
</button>

<!-- Некликабельный оверлей -->
<div class="pointer-events-none absolute inset-0">
  Декоративный слой
</div>

<!-- Изображение с сохранением пропорций -->
<div class="aspect-video overflow-hidden radius-8">
  <img class="w-100 h-100 object-cover" src="thumbnail.jpg" />
</div>

<!-- Квадратная иконка -->
<div class="aspect-square d-flex items-center justify-center bg-blue radius-4" style="width: 48px">
  <i class="icon text-white"></i>
</div>

<!-- Обрезка описания -->
<p class="line-clamp-2">
  Очень длинное описание товара, которое будет обрезано после второй строки...
</p>

<!-- Запретить выделение текста -->
<div class="select-none">Этот текст нельзя выделить</div>