appearance

appearance (기본 모양 제어)

브라우저가 요소에 기본적으로 적용하는 고유 스타일을 없애거나 되살리는 유틸리티예요. 커스텀 폼 컴포넌트를 만들 때 특히 자주 쓰여요.

출처: 문서

본문

ClassStyles

Examples

Removing default appearance

요소에 적용된 브라우저 고유 스타일을 초기화하고 싶다면 appearance-none을 사용해요.

<select>
  <option>Yes</option>
  <option>No</option>
  <option>Maybe</option>
</select>
<div class="grid">
  <select class="col-start-1 row-start-1 appearance-none bg-gray-50 dark:bg-gray-800 ...">
    <option>Yes</option>
    <option>No</option>
    <option>Maybe</option>
  </select>
  <svg class="pointer-events-none col-start-1 row-start-1 ...">
    <!-- ... -->
  </svg>
</div>

이 유틸리티는 커스텀 폼 컴포넌트를 만들 때 자주 사용돼요.

Restoring default appearance

요소에 브라우저 고유의 기본 스타일을 되돌리고 싶다면 appearance-auto를 사용해요.

개발자 도구에서 forced-colors: active를 흉내 내 보면 그 차이를 확인할 수 있어요.

<label>
  <div>
    <input type="checkbox" class="appearance-none forced-colors:appearance-auto ..." />
    <svg class="invisible peer-checked:visible forced-colors:hidden ...">
      <!-- ... -->
    </svg>
  </div>
  Falls back to default appearance
</label>
<label>
  <div>
    <input type="checkbox" class="appearance-none ..." />
    <svg class="invisible peer-checked:visible ...">
      <!-- ... -->
    </svg>
  </div>
  Keeps custom appearance
</label>

이 방법은 특정 접근성 모드에서 표준 브라우저 컨트롤로 되돌리고 싶을 때 유용해요.

Responsive design

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

<select class="appearance-auto md:appearance-none ...">
  <!-- ... -->
</select>

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

더 알아보기 (Learn more)