Question 1

Tailwind CSS의 50~950 셰이드 스케일은 어떻게 산출되나요?

Accepted Answer

Tailwind의 숫자 스케일은 가장 밝은 톤부터 가장 어두운 톤까지 체계적으로 정렬되어 있습니다: 50–100: 카드 배경 및 알림창용 매우 밝은 파스텔 틴트 (~90%~95% 명도).200–400: 테두리, 구분선, 비활성 상태 및 호버 배경용 중간 톤.500–600: 브랜드의 기본 색상(500) 및 주요 버튼 호버 상태(600).700–900: 본문 텍스트, 제목 및 다크 모드용 고대비 표면.950: 다크 모드용 딥 블랙에 가까운 최암부 틴트 (~5%~10% 명도).

Question 2

Tailwind CSS v3와 v4에서 커스텀 색상 스케일을 추가하는 방법은?

Accepted Answer

Tailwind CSS v3 (JavaScript 설정): tailwind.config.js 파일의 theme.extend.colors에 추가합니다: module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#F0F9FF',
          500: '#0EA5E9',
          900: '#0C4A6E',
        }
      }
    }
  }
}Tailwind CSS v4 (순수 CSS): CSS 파일 내에서 @theme 지시어를 통해 직접 선언합니다: @theme {
  --color-brand-50: #F0F9FF;
  --color-brand-500: #0EA5E9;
  --color-brand-900: #0C4A6E;
}

Question 3

단순히 흰색이나 검정을 섞으면 색상이 탁해 보이는 이유는?

Accepted Answer

선형적으로 흰색이나 검정을 섞으면 채도가 급격히 소실되어 텁텁하고 탁한 색상이 됩니다. 전문적인 Tailwind 팔레트는 색상 이동(Hue Shifting) 기법을 적용합니다: 색상이 밝아질수록 따뜻한 빛(햇빛) 방향으로, 어두워질수록 차가운 그림자(하늘 반사광) 방향으로 색상을 미세하게 회전시켜 전 영역에서 생동감을 유지합니다.

Question 4

제목, 본문, 테두리에는 어떤 Tailwind 셰이드를 사용하는 것이 좋나요?

Accepted Answer

권장되는 UI 타이포그래피 계층 구조: 제목 (H1–H3): 최대 대비의 text-slate-900 또는 text-neutral-900.본문 텍스트: 장시간 읽기 편안한 text-slate-700 또는 text-neutral-600.캡션 및 부가 정보: text-slate-500.카드 및 입력창 테두리: border-slate-200 (라이트 모드), border-slate-800 (다크 모드).

Tailwind 색상 생성기

Generated Scale

Component Preview

Buttons

Alerts & Badges

System Update

Tailwind 셰이드 스케일의 구조

자주 묻는 질문 (FAQ)