Forced Color Adjust

​Basic usage

​강제 색상 모드에서 제외하기

강제 색상 모드에서 강제된 색상을 특정 엘리먼트에 적용하지 않으려면 forced-color-adjust-none을 사용하세요. 이는 제한된 색상 팔레트를 강제할 경우 사용성이 저하될 수 있는 상황에서 유용합니다.

개발자 도구에서 `forced-colors: active`를 에뮬레이트하여 변경 사항을 확인해 보세요

Basic Tee

$35

Choose a color

White Gray Black

<form>
  <img src="..." />
  <div>
    <h3>Basic Tee</h3>
    <h3>$35</h3>
    <fieldset>
      <legend class="sr-only">Choose a color</legend>
      <div class="forced-color-adjust-none ...">
        <label >
          <input class="sr-only" type="radio" name="color-choice" value="White" />
          <span class="sr-only">White</span>
          <span class="size-6 rounded-full border border-black border-opacity-10 bg-white"></span>
        </label>
        <!-- ... -->
      </div>
    </fieldset>
</form>

또한 forced-colors 수식어를 사용하여 사용자가 강제 색상 모드를 활성화했을 때 조건부로 스타일을 추가할 수 있습니다.

​강제 색상 복원

forced-color-adjust-none을 사용한 경우, forced-color-adjust-auto를 사용하여 강제 색상 모드에서 적용된 색상을 다시 적용할 수 있습니다.

이 기능은 예를 들어 더 큰 화면 크기에서 다른 컨트롤을 사용할 때 유용합니다:

<form>
  <fieldset class="forced-color-adjust-none lg:forced-color-adjust-auto ...">
    <legend>색상을 선택하세요:</legend>
    <select class="hidden lg:block">
      <option value="White">하양</option>
      <option value="Gray">회색</option>
      <option value="Black">검정</option>
    </select>
    <div class="lg:hidden">
      <label>
        <input class="sr-only" type="radio" name="color-choice" value="White" />
        <!-- ... -->
      </label>
      <!-- ... -->
    </div>
  </fieldset>
</form>

​Applying conditionally

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

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

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

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

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

<div class="forced-color-adjust-none md:forced-color-adjust-auto">
  <!-- ... -->
</div>

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