color

color (텍스트 색상)

요소의 텍스트 색상을 설정하는 유틸리티예요. 기본 팔레트의 모든 색 값을 손쉽게 바로 쓸 수 있으니 옆에서 함께 짚어 드릴게요.

출처: 문서

본문

ClassStyles

Examples

Basic example

text-blue-600 이나 text-sky-400 같은 유틸리티를 사용해서 요소의 텍스트 색상을 제어할 수 있어요.

<p class="text-blue-600 dark:text-sky-400">The quick brown fox...</p>

Changing the opacity

색상 불투명도(opacity) 수정자를 사용해서 요소 텍스트 색상의 불투명도를 제어할 수 있어요.

<p class="text-blue-600/100 dark:text-sky-400/100">The quick brown fox...</p>
<p class="text-blue-600/75 dark:text-sky-400/75">The quick brown fox...</p>
<p class="text-blue-600/50 dark:text-sky-400/50">The quick brown fox...</p>
<p class="text-blue-600/25 dark:text-sky-400/25">The quick brown fox...</p>

Using a custom value

text-[<value>] 문법을 사용하면 완전히 커스텀한 값으로 텍스트 색상을 설정할 수 있어요.

<p class="text-[#50d71e] ...">
  Lorem ipsum dolor sit amet...
</p>

CSS 변수라면 text-(<custom-property>) 문법을 사용할 수도 있어요.

<p class="text-(--my-color) ...">
  Lorem ipsum dolor sit amet...
</p>

이는 text-[var(<custom-property>)] 의 축약형으로, var() 함수를 자동으로 추가해 주는 문법이에요.

Applying on hover

color 유틸리티 앞에 hover:* 같은 변형을 붙이면, 그 상태에서만 해당 유틸리티를 적용할 수 있어요.

텍스트 위에 마우스를 올려 기대되는 동작을 확인해 보세요.

<p class="...">
  Oh I gotta get on that
  <a class="underline hover:text-blue-600 dark:hover:text-blue-400" href="https://en.wikipedia.org/wiki/Internet">internet</a>,
  I'm late on everything!
</p>

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

Responsive design

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

<p class="text-blue-600 md:text-green-600 ...">
  Lorem ipsum dolor sit amet...
</p>

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

Customizing your theme

--color-* 테마 변수를 사용해서 프로젝트의 색상 유틸리티를 커스터마이즈할 수 있어요.

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

이제 마크업에서 text-regal-blue 유틸리티를 사용할 수 있어요.

<p class="text-regal-blue">
  Lorem ipsum dolor sit amet...
</p>

테마를 커스터마이즈하는 방법에 대해 더 자세히 알고 싶다면 theme 문서를 참고해 주세요.

더 알아보기 (Learn more)