Resize

Class	Properties
r-b	resize: both;
r-h	resize: horizontal;
r-none	resize: none;
r-v	resize: vertical;

Both

This example sets the resize property to both. The r-b utility allows the element to be resized both horizontally and vertically.

Try resizing the text area to see how it changes in size.

Write a message:

<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

This example sets the resize property to horizontal. The r-h utility allows the element to be resized only in the horizontal direction.

Try resizing the text area to see how it changes in size.

Write a message:

<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

This example sets the resize property to none. The r-none utility prevents the element from being resized by the user.

Try resizing the text area to see how it changes in size.

Write a message:

<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

This example sets the resize property to vertical. The r-v utility allows the element to be resized only in the vertical direction.

Try resizing the text area to see how it changes in size.

Write a message:

<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>

Conditional styles

Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.

Media modifiers

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>

Hover modifiers

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>