Домашняя страница Tailwind CSS
  1. Интерактивность
  2. Изменение размера

Краткая справка

Класс
Свойства
resize-noneresize: none;
resize-yresize: vertical;
resize-xresize: horizontal;
resizeresize: both;

Основы использования

Изменение размера во всех направлениях

Используйте resize, чтобы изменить размер элемента по горизонтали и вертикали.

Перетащите дескриптор текстовой области в демоверсии, чтобы увидеть ожидаемое поведение

<textarea class="resize rounded-md"></textarea>

Изменить размер по вертикали

Используйте resize-y, чтобы изменить размер элемента по вертикали.

Перетащите дескриптор текстовой области в демоверсии, чтобы увидеть ожидаемое поведение

<textarea class="resize-y rounded-md"></textarea>

Изменить размер по горизонтали

Используйте resize-x, чтобы изменить размер элемента по горизонтали.

Перетащите дескриптор текстовой области в демоверсии, чтобы увидеть ожидаемое поведение

<textarea class="resize-x rounded-md"></textarea>

Предотвратить изменение размера

Используйте resize-none, чтобы предотвратить изменение размера элемента.

Обратите внимание, что дескриптор текстовой области исчез

<textarea class="resize-none rounded-md"></textarea>

Применяя условно

Tailwind позволяет условно применять служебные классы в разных состояниях с помощью модификаторов вариантов. Например, используйте hover:resize, чтобы применять утилиту resize только при hover.

<div class="resize-none hover:resize">
  <!-- ... -->
</div>

Полный список всех доступных модификаторов состояния смотрите в документации Наведение, фокус и другие состояния.

Контрольные точки и медиа-запросы

Вы также можете использовать модификаторы вариантов для таргетинга на медиа-запросы, такие как реагирующие контрольные точки, темный режим, предпочтения с уменьшенным движением и многое другое. Например, используйте md:resize, чтобы применить утилиту resize только на экранах среднего размера и выше.

<div class="resize-none md:resize">
  <!-- ... -->
</div>

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