resize

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

快速参考

类	属性
resize-none	resize: none;
resize	resize: both;
resize-y	resize: vertical;
resize-x	resize: horizontal;

示例

双向调整大小

使用 resize 让元素可以在水平和垂直方向上调整大小：

<!-- [!code classes:resize] -->
<textarea class="resize rounded-md ..."></textarea>

垂直调整大小

使用 resize-y 让元素可以在垂直方向上调整大小：

<!-- [!code classes:resize-y] -->
<textarea class="resize-y rounded-md ..."></textarea>

水平调整大小

使用 resize-x 让元素可以在水平方向上调整大小：

<!-- [!code classes:resize-x] -->
<textarea class="resize-x rounded-md ..."></textarea>

禁止调整大小

使用 resize-none 禁止调整元素大小：

<!-- [!code classes:resize-none] -->
<textarea class="resize-none rounded-md"></textarea>

响应式设计

使用 md: 等断点变体为 resize 工具类添加前缀，使其仅在中等及以上屏幕尺寸生效：

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

在 变体文档 中了解如何使用变体。