Resize
Controls the way an item can be resized
Class | Properties |
---|---|
r-b | resize: both; |
r-h | resize: horizontal; |
r-none | resize: none; |
r-v | resize: vertical; |
Both
The element can be resized both horizontally and vertically.
<div class="d-f fd-c"> <label class="mb-2">Write a message:</label> <textarea class="b-1 b-s max-h-50 max-w-100 rad-1 r-b" rows="4"></textarea></div>
Horizontal
The element can be only be resized horizontally.
<div class="d-f fd-c"> <label class="mb-2">Write a message:</label> <textarea class="b-1 b-s max-w-100 rad-1 r-h" rows="4"></textarea></div>
None
The element cannot be resized.
<div class="d-f fd-c"> <label class="mb-2">Write a message:</label> <textarea class="b-1 b-s max-w-100 rad-1 r-none" rows="4"></textarea></div>
Vertical
The element can be only be resized vertically.
<div class="d-f fd-c"> <label class="mb-2">Write a message:</label> <textarea class="b-1 b-s max-h-50 rad-1 r-v" rows="4"></textarea></div>
Utilizing utilities conditionally
Override existing utilities based on the user's screen size or other factors, such as hover states. Learn more about modifiers in our documentation.
Responsive breakpoints
You can combine responsive breakpoints like sm:r-*
,md:r-*
, lg:r-*
, and xxl:r-*
allows targeting specific utilities in
different viewports.
<div class="r-none md:r-h ..."></div>
Utilizing utilities conditionally
Override existing utilities based on the user's screen size or other factors, such as hover states. Learn more about modifiers in our documentation.
Hover states
Alternatively, you can apply :hover
by using h:r-*
utility to override elements
and change their values when hovering over them.
<div class="r-none h:r-h ..."></div>