resize

resize

要素のリサイズ方法を制御するためのユーティリティ。

クラススタイル

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>

プレフィックスa resize ユーティリティ md: のようなブレークポイントバリアントとともに使用して、ユーティリティを適用するのはmedium 画面サイズ以上の場合のみです。

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

バリアントの使用方法の詳細については、バリアントのドキュメントをご覧ください。