불투명도

불투명도 (Opacity)

요소의 불투명도를 정하는 유틸리티예요. CSS의 opacity 속성을 조절해서 요소를 얼마나 투명하게 보일지 제어할 수 있어요.

출처: 문서

본문

클래스와 스타일

opacity-<number> — opacity: <number>%;
opacity-(<custom-property>) — opacity: var(<custom-property>);
opacity-[<value>] — opacity: <value>;

기본 예제

opacity-<number> 유틸리티(예: opacity-25, opacity-100)를 쓰면 요소의 불투명도를 정할 수 있어요.

<button class="bg-indigo-500 opacity-100 ..."></button>
<button class="bg-indigo-500 opacity-75 ..."></button>
<button class="bg-indigo-500 opacity-50 ..."></button>
<button class="bg-indigo-500 opacity-25 ..."></button>

조건부 적용

opacity 유틸리티 앞에 disabled:* 같은 변형을 붙이면 그 상태에서만 유틸리티가 적용돼요.

<input class="opacity-100 disabled:opacity-75 ..." type="text" />

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

커스텀 값 사용하기

opacity-[<value>] 문법을 쓰면 완전히 커스텀한 값으로 불투명도를 정할 수 있어요.

<button class="opacity-[.67] ...">
  <!-- ... -->
</button>

CSS 변수를 쓸 때는 opacity-(<custom-property>) 문법도 사용할 수 있어요.

<button class="opacity-(--my-opacity) ...">
  <!-- ... -->
</button>

이건 opacity-[var(<custom-property>)]의 축약형이라서 var() 함수를 자동으로 붙여줘요.

반응형 디자인

opacity 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면 중간(md) 이상 화면 크기에서만 그 유틸리티가 적용돼요.

<button class="opacity-50 md:opacity-100 ...">
  <!-- ... -->
</button>