resize

resize 유틸리티는 요소(특히 텍스트 영역)를 사용자가 직접 크기 조절할 수 있게 해 주는 기능이에요. 방향까지 세밀하게 제어할 수 있답니다.

출처: 문서

본문

모든 방향으로 크기 조절하기 (Resizing in all directions)

resize를 사용하면 요소를 가로와 세로 모두에서 크기 조절할 수 있게 돼요:

데모에서 텍스트 영역의 핸들을 드래그해서 기대했던 동작을 확인해 보세요.

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

세로로 크기 조절하기 (Resizing vertically)

resize-y를 사용하면 요소를 세로로만 크기 조절하게 할 수 있어요:

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

가로로 크기 조절하기 (Resizing horizontally)

resize-x를 사용하면 요소를 가로로만 크기 조절하게 할 수 있어요:

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

크기 조절 막기 (Prevent resizing)

resize-none을 사용하면 요소를 아예 크기 조절할 수 없게 막아요:

텍스트 영역의 핸들이 사라진 것을 확인해 보세요.

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

반응형 디자인 (Responsive design)

resize 유틸리티에 md: 같은 브레이크포인트 변형을 붙이면 중간 크기(md) 화면 이상에서만 그 유틸리티가 적용돼요:

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

변형(variant) 사용법에 대해 더 알고 싶다면 variants 문서를 살펴보세요.