Resize

Utility	Properties
Failed to load data. Please try again later.

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 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 max-w-100 rad-1 r-h" rows="4"></textarea>
</div>

None

Initial value

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

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 modifier

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>