텍스트 색상은 다양한 컬러 팔레트를 사용하여 쉽게 설정할 수 있으며, 다크 모드와 커스텀 색상, 그라데이션 효과까지 적용할 수 있습니다.
텍스트 색상 설정 기본 규칙
텍스트 색상은 text-color-명도 형식으로 설정됩니다. 예를 들어, text-indigo-500은 인디고 계열의 중간 밝기를 가진 색상을 의미합니다.
설정 가능한 색상
-
기본 색상 팔레트
slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose 등 다양한 색상을 지원합니다.
설정 가능한 명도
-
명도 (Lightness)
색상 팔레트의 명도는 50에서 950까지 숫자로 설정할 수 있으며, 숫자가 높을수록 진해지고, 낮을수록 밝아집니다. 예: text-blue-100은 밝은 파란색, text-blue-900은 짙은 파란색입니다.
특수 색상 설정
-
흰색과 검정
흰색과 검정은 text-white, text-black으로 설정할 수 있습니다.
-
다크 모드 색상
다크 모드에서 다른 색상을 사용하고 싶다면 dark: 접두사를 붙여 설정할 수 있습니다. 예: dark:text-indigo-600
-
커스텀 색상
정의된 팔레트 외의 색상을 사용하려면, text-[#custom_color] 형식으로 설정합니다. 예: text-[#ff5733]
그라데이션 텍스트 설정
텍스트에 그라데이션 효과를 추가하려면, Tailwind CSS의 bg-gradient-to-r(오른쪽 방향으로 그라데이션)와 text-transparent, bg-clip-text 클래스를 조합하여 적용할 수 있습니다.
<div class="text-3xl font-bold bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-transparent bg-clip-text">
그라데이션 텍스트
</div>
이 가이드를 통해 텍스트 색상과 다크 모드, 그라데이션 효과를 쉽게 설정하고 커스터마이징할 수 있습니다.