リサイズ

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

Class reference

Class
Properties
.resize-noneresize: none;
.resize-yresize: vertical;
.resize-xresize: horizontal;
.resizeresize: both;

Resize in all directions

.resizeを使用して、要素を水平方向および垂直方向にサイズ変更可能にします。

<textarea class="resize border rounded focus:outline-none focus:shadow-outline"></textarea>

Resize vertically

.resize-yを使用して、要素を垂直方向にサイズ変更可能にします。

<textarea class="resize-y border rounded focus:outline-none focus:shadow-outline"></textarea>

Resize horizontally

.resize-xを使用して、要素を水平方向にサイズ変更可能にします。

<textarea class="resize-x border rounded focus:outline-none focus:shadow-outline"></textarea>

Prevent resizing

要素のサイズを変更できないようにするには、.resize-noneを使用します。

<textarea class="resize-none border rounded focus:outline-none focus:shadow-outline"></textarea>

カスタマイズ

レスポンシブと疑似バリアントクラス

デフォルトでonly responsive バリアントはresizing utilitiesのために作られます。

あなたはどのバリアントがresizing utilitiesのために作られるかを tailwind.config.jsファイル内のvariantsセクションのresizeプロパティを修正することによってコントロールできます。

例として、この設定は also hover and focus バリアントを作ります。

  // tailwind.config.js
  module.exports = {
    variants: {
      // ...
-     resize: ['responsive'],
+     resize: ['responsive', 'hover', 'focus'],
    }
  }

無効にする

もしresizing utilitiesを使う予定がないなら、configファイルのcorePluginsセクションのresize propertyfalseに設定することで完全に無効にすることができます。

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     resize: false,
    }
  }

Translated by T.Arai @ Entap,Inc. / スマホアプリ開発会社

Tailwind UI is now in early access!