field-sizing

field-sizing (폼 컨트롤 크기 결정)

폼 컨트롤이 내용에 따라 크기를 조절할지, 고정된 크기를 유지할지를 정하는 유틸리티예요. 옆에서 함께 짚어 드릴게요.

출처: 문서

클래스	스타일
`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>

field-sizing 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면, 중간 크기(md) 화면 이상에서만 해당 유틸리티를 적용할 수 있어요.

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

변형(variant) 사용법에 대해 더 자세히 알고 싶다면 variants 문서를 참고해 주세요.