1. 交互
  2. resize

交互

调整大小

用于控制元素如何调整大小的工具类。

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

示例

在所有方向调整大小

使用 resize 使元素可以水平和垂直调整大小:

在演示中拖动文本区域的手柄以查看预期行为

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

垂直调整大小

使用 resize-y 使元素可以垂直调整大小:

在演示中拖动文本区域的手柄以查看预期行为

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

水平调整大小

使用 resize-x 使元素可以水平调整大小:

在演示中拖动文本区域的手柄以查看预期行为

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

禁止调整大小

使用 resize-none 防止元素被调整大小:

注意文本区域的手柄已消失

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

响应式设计

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.·Trademark Policy