Tailwind CSS home page
  1. Sizing
  2. Min-Height

Quick reference

Class
Properties
min-h-0min-height: 0px;
min-h-1min-height: 0.25rem; /* 4px */
min-h-2min-height: 0.5rem; /* 8px */
min-h-3min-height: 0.75rem; /* 12px */
min-h-4min-height: 1rem; /* 16px */
min-h-5min-height: 1.25rem; /* 20px */
min-h-6min-height: 1.5rem; /* 24px */
min-h-7min-height: 1.75rem; /* 28px */
min-h-8min-height: 2rem; /* 32px */
min-h-9min-height: 2.25rem; /* 36px */
min-h-10min-height: 2.5rem; /* 40px */
min-h-11min-height: 2.75rem; /* 44px */
min-h-12min-height: 3rem; /* 48px */
min-h-14min-height: 3.5rem; /* 56px */
min-h-16min-height: 4rem; /* 64px */
min-h-20min-height: 5rem; /* 80px */
min-h-24min-height: 6rem; /* 96px */
min-h-28min-height: 7rem; /* 112px */
min-h-32min-height: 8rem; /* 128px */
min-h-36min-height: 9rem; /* 144px */
min-h-40min-height: 10rem; /* 160px */
min-h-44min-height: 11rem; /* 176px */
min-h-48min-height: 12rem; /* 192px */
min-h-52min-height: 13rem; /* 208px */
min-h-56min-height: 14rem; /* 224px */
min-h-60min-height: 15rem; /* 240px */
min-h-64min-height: 16rem; /* 256px */
min-h-72min-height: 18rem; /* 288px */
min-h-80min-height: 20rem; /* 320px */
min-h-96min-height: 24rem; /* 384px */
min-h-pxmin-height: 1px;
min-h-0.5min-height: 0.125rem; /* 2px */
min-h-1.5min-height: 0.375rem; /* 6px */
min-h-2.5min-height: 0.625rem; /* 10px */
min-h-3.5min-height: 0.875rem; /* 14px */
min-h-fullmin-height: 100%;
min-h-screenmin-height: 100vh;
min-h-svhmin-height: 100svh;
min-h-lvhmin-height: 100lvh;
min-h-dvhmin-height: 100dvh;
min-h-minmin-height: min-content;
min-h-maxmin-height: max-content;
min-h-fitmin-height: fit-content;

Basic usage

최소 높이 설정

min-h-* 유틸리티를 사용해 엘리먼트의 최소 높이를 설정할 수 있습니다.

min-h-80
min-h-64
min-h-48
min-h-40
min-h-32
min-h-24
min-h-full
<div class="h-96 ...">
  <div class="min-h-80 ...">min-h-80</div>
  <div class="min-h-64 ...">min-h-64</div>
  <div class="min-h-48 ...">min-h-48</div>
  <div class="min-h-40 ...">min-h-40</div>
  <div class="min-h-32 ...">min-h-32</div>
  <div class="min-h-24 ...">min-h-24</div>
  <div class="min-h-full ...">min-h-full</div>
</div>

Applying conditionally

호버, 포커스 및 기타 상태

Tailwind는 상태에 따라 유틸리티 클래스를 조건부로 적용할 수 있게 해줍니다. 예를 들어, hover:min-h-full 를 사용하면 min-h-full 유틸리티를 hover 상태에서만 적용할 수 있습니다.

<div class="h-24 min-h-0 hover:min-h-full">
  <!-- ... -->
</div>

사용 가능한 모든 상태 수정자 목록은 호버, 포커스, & 기타 상태 문서를 참고하세요.

브레이크포인트와 미디어 쿼리

여러분은 반응형 브레이크포인트, 다크 모드, prefers-reduced-motion 등과 같은 미디어 쿼리를 타겟팅하기 위해 변형 수식어를 사용할 수 있습니다. 예를 들어, md:min-h-full를 사용하면 중간 화면 크기 이상에서만 min-h-full 유틸리티를 적용할 수 있습니다.

<div class="h-24 min-h-0 md:min-h-full">
  <!-- ... -->
</div>

더 자세히 알아보려면 반응형 디자인, 다크 모드, 그리고 다른 미디어 쿼리 수식어에 대한 문서를 확인하세요.

Using custom values

테마 커스터마이징

기본적으로 Tailwind의 최소 높이(min-height) 스케일은 기본 간격 스케일과 높이에 특화된 몇 가지 추가 값으로 구성됩니다.

tailwind.config.js 파일에서 theme.spacing 또는 theme.extend.spacing을 수정하여 간격 스케일을 커스터마이징할 수 있습니다.

tailwind.config.js
module.exports = {
  theme: {
    extend: {
      spacing: {
        '128': '32rem',
      }
    }
  }
}

min-height를 별도로 커스터마이징하려면 tailwind.config.js 파일의 theme.minHeight 섹션을 사용하세요.

tailwind.config.js
module.exports = {
  theme: {
    extend: {
      minHeight: {
        '128': '32rem',
      }
    }
  }
}

기본 테마 커스터마이징에 대해 더 알아보려면 테마 커스터마이징 문서를 참고하세요.

임의 값

테마에 포함시키기 어려운 min-height 값을 일회성으로 사용해야 한다면, 대괄호를 사용해 임의의 값으로 속성을 즉석에서 생성할 수 있습니다.

<div class="min-h-[220px]">
  <!-- ... -->
</div>

임의 값 지원에 대해 더 알아보려면 임의 값 문서를 참고하세요.