Appearance

​Basic usage

​기본 엘리먼트 스타일 제거

appearance-none을 사용하면 브라우저별로 적용된 기본 스타일을 초기화할 수 있습니다. 이 유틸리티는 주로 커스텀 폼 컴포넌트를 만들 때 사용됩니다.

<select>
  <option>Yes</option>
  <option>No</option>
  <option>Maybe</option>
</select>

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

​기본 엘리먼트 스타일 복원하기

appearance-auto를 사용하면 엘리먼트에 브라우저별 기본 스타일을 복원할 수 있습니다. 이는 특정 접근성 모드에서 표준 브라우저 컨트롤로 되돌릴 때 유용합니다.

<label>
  <div>
    <input type="checkbox" class="appearance-none forced-colors:appearance-auto ..." />
    <svg class="invisible peer-checked:visible forced-colors:hidden ..." >
      <!-- ... -->
    </svg>
  </div>
  기본 스타일로 복원
</label>

<label>
  <div>
    <input type="checkbox" class="appearance-none ..." />
    <svg class="invisible peer-checked:visible ...">
      <!-- ... -->
    </svg>
  </div>
  커스텀 스타일 유지
</label>

​Applying conditionally

​호버, 포커스 및 기타 상태

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

<div class="appearance-auto hover:appearance-none">
  <!-- ... -->
</div>

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

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

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

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

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