调整大小

Class

Properties

resize-none

resize: none;

resize-y

resize: vertical;

resize-x

resize: horizontal;

resize

resize: both;

基础用法

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

Drag the textarea handle in the demo to see the expected behaviour

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

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

Drag the textarea handle in the demo to see the expected behaviour

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

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

Drag the textarea handle in the demo to see the expected behaviour

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

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

Notice that the textarea handle is gone

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

Tailwind 允许您使用变体修饰符有条件地在不同状态下应用实用程序类。例如，使用 hover:resize 来仅在 hover应用 resize.

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

详细了解, 请参考 Hover, Focus, & Other States 文档.

您还可以使用变体修饰符来定位媒体查询，例如响应式断点、暗模式、首选减少运动等。例如, 使用 md:resize 来应用 resize 程序，适用于中等屏幕尺寸及以上。

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