색상 팔레트 사용하기

색상 팔레트 사용하기 (Colors)

Tailwind는 전문 디자이너가 정성껏 다듬어 넣은 풍부한 기본 색상 팔레트를 즉시 사용할 수 있게 제공해요. 다양한 디자인 스타일에 두루 어울리도록 구성되어 있어서, 별도로 색을 정의하지 않아도 유틸리티 하나로 깔끔한 색을 쓸 수 있어요.

출처: Tailwind CSS — Colors

기본 팔레트의 구조

기본 팔레트의 모든 색은 11단계로 나뉘어 있어요. 50이 가장 밝고, 950이 가장 어두워요. 예를 들어 sky 색 계열은 bg-sky-50부터 bg-sky-950까지 단계별로 존재해요.

<div>
  <div class="bg-sky-50"></div>
  <div class="bg-sky-100"></div>
  <div class="bg-sky-200"></div>
  <div class="bg-sky-300"></div>
  <div class="bg-sky-400"></div>
  <div class="bg-sky-500"></div>
  <div class="bg-sky-600"></div>
  <div class="bg-sky-700"></div>
  <div class="bg-sky-800"></div>
  <div class="bg-sky-900"></div>
  <div class="bg-sky-950"></div>
</div>

전체 색상 팔레트는 배경색(bg-*), 테두리색(border-*), 채우기(fill-*), 커서색(caret-*) 등 색과 관련된 모든 유틸리티에서 그대로 사용할 수 있어요.

색 유틸리티 사용하기

요소의 색 속성을 지정할 때는 bg-white, border-pink-300, text-gray-950 같은 유틸리티를 조합해요.

<div class="flex items-center gap-4 rounded-lg bg-white p-6 shadow-md outline outline-black/5 dark:bg-gray-800">
  <span class="inline-flex shrink-0 rounded-full border border-pink-300 bg-pink-100 p-2 dark:border-pink-300/10 dark:bg-pink-400/10">
    <svg class="size-6 stroke-pink-700 dark:stroke-pink-500"><!-- ... --></svg>
  </span>
  <div>
    <p class="text-gray-700 dark:text-gray-400">
      <span class="font-medium text-gray-950 dark:text-white">Tom Watson</span> mentioned you in
      <span class="font-medium text-gray-950 dark:text-white">Logo redesign</span>
    </p>
    <time class="mt-1 block text-gray-500" datetime="9:37">9:37am</time>
  </div>
</div>

이렇게 유틸리티를 조합하면 클래스 이름만으로 원하는 색을 정확히 지정할 수 있고, 다크 모드에서는 dark: 변형을 붙여 별도 색을 쉽게 줄 수 있어요.

색상 팔레트 사용하기