resize

resize

Утилиты для управления тем, как элемент может изменять размер.

Class Styles

resize-none

resize: none;

resize

resize: both;

resize-y

resize: vertical;

resize-x

resize: horizontal;

Примеры

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

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

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

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

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

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

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

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

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

Используйте resize-none для предотвращения изменения размера элемента:

Обратите внимание, что ручка textarea исчезла

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

Префикс a resize утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:

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

Подробнее об использовании вариантов читайте в документации по вариантам.