새 화면을 만들며 버튼에 팀 색상을 입힐 때가 있습니다. 파일마다 색상값을 고칠지, 전역 CSS 한곳에서 관리할지 먼저 결정하면 이후 수정 범위가 달라집니다. 오늘 GitHub Trending TypeScript 일간에서 133 stars today를 확인한 shadcn-ui/ui는 React UI 컴포넌트의 소스 코드를 프로젝트에 추가해 고쳐 쓰는 도구입니다. 9월 5일에는 기존 파일을 덮어쓰기 전 diff 확인을 다뤘고, 오늘은 새 프로젝트의 색상 관리 방식을 봅니다. 공식 테마 문서에서는 CSS 변수 방식이 기본값입니다. components.json에서 cssVariables가 true이면 전역 CSS의 :root와 .dark에 있는 --primary·--primary-foreground 값이 기본 Button의 배경·글자 색에 연결됩니다. 밝은 화면만 바꾸고 어두운 화면을 놓치면 글자가 잘 안 보일 수 있으므로 두 화면을 함께 확인해야 합니다. 작게 시험하려면 일회용 새 React 프로젝트에서 [email protected]으로 Button 하나를 추가하세요. components.json과 전역 CSS 경로를 확인하고 두 모드의 변수 값을 바꿔 버튼과 글자의 대비를 봅니다. 색상값을 각 컴포넌트의 Tailwind 클래스에 직접 넣는 방식도 있지만, 공식 문서는 초기 설정에서 --no-css-variables를 선택해야 한다고 안내합니다. 기존 프로젝트의 방식 전환은 삭제·재설치가 필요하므로 그대로 적용하지 마세요. 최신 안정 릴리스 [email protected]은 9월 4일에 나왔고 main은 9월 16일에도 변경됐습니다. 시험 버전을 고정하고 MIT 라이선스 고지, Tailwind CSS와 다크 모드 설정까지 확인한 뒤 팀에 맞는 방식을 고르세요.
