accent-color

예제

액센트 색상 설정하기

accent-rose-500이나 accent-lime-600 같은 유틸리티를 사용해 엘리먼트의 액센트 색상을 변경할 수 있습니다.

<label>  <input type="checkbox" checked />  브라우저 기본값</label><label>  <input class="accent-pink-500" type="checkbox" checked />  커스텀 설정</label>

이 방법은 체크박스나 라디오 버튼 같은 엘리먼트의 기본 색상을 덮어쓸 때 유용합니다.

투명도 변경하기

엘리먼트의 강조 색상 투명도를 조절하려면 색상 투명도 수정자를 사용하세요:

<input class="accent-purple-500/25" type="checkbox" checked /><input class="accent-purple-500/75" type="checkbox" checked />

강조 색상 투명도 설정은 현재 Firefox에서만 작동하며, 브라우저 지원이 제한적입니다.

커스텀 값 사용하기

accent-[<value>] 구문을 사용하세요 accent color를 완전히 커스텀한 값으로 설정하려면:

<input class="accent-[#50d71e] ..." type="checkbox" />

CSS 변수를 사용하려면 accent-(<custom-property>) 구문을 사용할 수도 있습니다:

<input class="accent-(--my-accent-color) ..." type="checkbox" />

이는 accent-[var(<custom-property>)] 의 단축 표현으로, 자동으로 var() 함수를 추가해 줍니다.

호버 시 적용하기

accent-color가 모음으로 시작하면 "an", 그렇지 않으면 "a"를 붙여 accent-color 유틸리티 앞에 hover:*와 같은 변형을 추가하면 해당 상태에서만 유틸리티를 적용할 수 있습니다:

<input class="accent-black hover:accent-pink-500" type="checkbox" />

변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.

반응형 디자인

접두사 an accent-color 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:

<input class="accent-black md:accent-pink-500 ..." type="checkbox" />

변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.

테마 커스터마이징

--color-* 테마 변수를 사용해 프로젝트에서 color 유틸리티를 커스터마이징할 수 있습니다:

@theme {  --color-regal-blue: #243c5a; }

이제 accent-regal-blue 유틸리티를 마크업에서 사용할 수 있습니다:

<input class="accent-regal-blue" type="checkbox" />

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