resize

Các tiện ích để kiểm soát cách một phần tử có thể được thay đổi kích thước.

ClassStyles
resize-none
resize: none;
resize
resize: both;
resize-y
resize: vertical;
resize-x
resize: horizontal;

Ví dụ

Thay đổi kích thước theo mọi hướng

Sử dụng resize để làm cho một phần tử có thể thay đổi kích thước theo chiều ngang và dọc:

Kéo tay cầm textarea trong demo để thấy hành vi mong đợi

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

Thay đổi kích thước theo chiều dọc

Sử dụng resize-y để làm cho một phần tử có thể thay đổi kích thước theo chiều dọc:

Kéo tay cầm textarea trong demo để thấy hành vi mong đợi

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

Thay đổi kích thước theo chiều ngang

Sử dụng resize-x để làm cho một phần tử có thể thay đổi kích thước theo chiều ngang:

Kéo tay cầm textarea trong demo để thấy hành vi mong đợi

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

Ngăn chặn thay đổi kích thước

Sử dụng resize-none để ngăn chặn một phần tử khỏi việc thay đổi kích thước:

Lưu ý rằng tay cầm textarea đã biến mất

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

Responsive design

Prefix a resize utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

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

Learn more about using variants in the variants documentation.

Copyright © 2025 Tailwind Labs Inc.·Chính sách thương hiệu