field-sizing

フォームコントロールのサイズ調整を制御するためのユーティリティ。

クラススタイル

クラス	スタイル
`field-sizing-fixed`	`field-sizing: fixed;`
`field-sizing-content`	`field-sizing: content;`

field-sizing-fixed

field-sizing: fixed;

field-sizing-content

field-sizing: content;

例

field-sizing-contentユーティリティを使用すると、フォームコントロールがコンテンツに基づいてサイズを調整できます。

下の入力欄に入力して、サイズの変化を確認してください。

<textarea class="field-sizing-content ..." rows="2">
  Latex Salesman, Vanderlay Industries
</textarea>

field-sizing-fixedユーティリティを使用すると、フォームコントロールを固定サイズにできます。

下の入力欄に入力して、サイズが変わらないことを確認してください。

<textarea class="field-sizing-fixed w-80 ..." rows="2">
  Latex Salesman, Vanderlay Industries
</textarea>

プレフィックスa field-sizingユーティリティ md:のようなブレークポイントバリアントを使用すると、ユーティリティを適用する範囲をmedium 以上の画面サイズに限定できます。

<input class="field-sizing-content md:field-sizing-fixed ..." />

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